<template>
    <!-- 设备管理-设备数据 -->
    <div class="mainContent">
        <div class="box_left">
            <div class="top">
                <Input
                    search
                    enter-button
                    clearable
                    v-model="keyword"
                    @on-search="searchMach"
                    placeholder="请输入类型、编号"
                    style="width: 100%" />
                <input
                    type="password"
                    autocomplete="new-password"
                    style="display: none" />
            </div>
            <div class="lineBc"></div>
            <div class="btnList">
                <div
                    :class="['item', bindFlag == 1 ? 'active' : '']"
                    @click="bindFlagFn(1)">
                    已入网{{ "(" + bindNum + ")" }}
                </div>
                <div
                    :class="['item', bindFlag == 0 ? 'active' : '']"
                    @click="bindFlagFn(0)">
                    未入网{{ "(" + unbindNum + ")" }}
                </div>
            </div>
            <div class="center">
                <div
                    class="list"
                    v-infinite-scroll="scrollLoadFn"
                    infinite-scroll-immediate="isImmediate">
                    <div
                        :class="['item', item.machId == machId ? 'active' : '']"
                        v-for="(item, index) in list"
                        :key="index"
                        @click="getMachDetail(item)">
                        <div class="img"><img :src="item.icon" /></div>
                        <span class="name">
                            <Tooltip
                                transfer
                                :content="item.machTypeName"
                                placement="top-start"
                                max-width="200">
                                <div
                                    class="p"
                                    style="width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer">
                                    {{ item.machTypeName }}
                                </div>
                            </Tooltip>
                        </span>
                        <span class="code">
                            <Tooltip
                                transfer
                                :content="item.machCode"
                                placement="top-start"
                                max-width="200">
                                <div
                                    class="p"
                                    style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer">
                                    {{ item.machCode }}
                                </div>
                            </Tooltip>
                        </span>
                    </div>
                    <div
                        style="height: 50px"
                        v-if="list.length > 1"></div>
                    <div
                        class="no_data"
                        v-if="list.length == 0">
                        <img src="../../assets/images/common/rotary_nodata.png" />
                    </div>
                </div>
            </div>
            <div class="bottom">{{ list.length }} / {{ totalCount }}</div>
        </div>
        <div class="box_right">
            <div
                class="GPS container"
                v-show="tabs == 1">
                <div
                    class="filter"
                    v-show="segList.length > 0">
                    <div class="item">
                        <span class="name">是否显示往返数据：</span>
                        <el-switch
                            v-model="switchDataFlag"
                            active-color="#0598EA"
                            inactive-color="#D3D3D3"></el-switch>
                    </div>
                    <div
                        class="item radioBox"
                        v-show="switchDataFlag">
                        <div class="radio">
                            <div class="point"></div>
                            <div class="text">往返次数（{{ segList.length }}）</div>
                        </div>
                    </div>
                </div>
                <div
                    class="btnList"
                    v-show="initFlag">
                    <div
                        class="item active"
                        @click="setTabs(1)">
                        轨迹
                    </div>
                    <div
                        class="item"
                        @click="setTabs(2)">
                        工时
                    </div>
                    <div
                        class="item"
                        @click="setTabs(3)"
                        v-if="!ifOBDFlag">
                        油耗
                    </div>
                    <div
                        class="item"
                        @click="setTabs(4)"
                        v-if="!ifOBDFlag">
                        指数
                    </div>
                    <div
                        class="item"
                        @click="setTabs(6)"
                        v-if="ifOBDFlag">
                        油耗
                    </div>
                    <div
                        class="item"
                        @click="setTabs(7)"
                        v-if="ifOBDFlag">
                        里程
                    </div>
                    <div
                        class="item"
                        @click="setTabs(5)"
                        v-if="ifOBDFlag">
                        参数
                    </div>
                </div>
                <div
                    class="time"
                    v-show="initFlag">
                    <div
                        class="arrow_left"
                        @click="prevFn">
                        <Icon type="md-arrow-dropleft" />
                    </div>
                    <div class="time_center">
                        <DatePicker
                            placement="bottom"
                            type="date"
                            :options="options"
                            :editable="false"
                            :clearable="false"
                            placeholder="请选择日期"
                            style="width: 100%"
                            format="yyyy-MM-dd"
                            v-model="day"
                            @on-change="getGpsDate"></DatePicker>
                    </div>
                    <div
                        class="arrow_right"
                        v-show="!timeFlag"
                        @click="nextFn">
                        <Icon type="md-arrow-dropright" />
                    </div>
                    <div
                        class="arrow_right"
                        v-show="timeFlag">
                        <Icon
                            type="md-arrow-dropright"
                            style="color: #eee; cursor: not-allowed" />
                    </div>
                </div>
                <div
                    id="container"
                    v-show="tabs == 1"></div>
            </div>
            <div
                class="WORK container"
                v-show="tabs == 2">
                <div class="search">
                    <div class="left">
                        <div class="btnList">
                            <div
                                class="item"
                                @click="setTabs(1)">
                                轨迹
                            </div>
                            <div
                                class="item active"
                                @click="setTabs(2)">
                                工时
                            </div>
                            <div
                                class="item"
                                @click="setTabs(3)"
                                v-if="!ifOBDFlag">
                                油耗
                            </div>
                            <div
                                class="item"
                                @click="setTabs(4)"
                                v-if="!ifOBDFlag">
                                指数
                            </div>
                            <div
                                class="item"
                                @click="setTabs(6)"
                                v-if="ifOBDFlag">
                                油耗
                            </div>
                            <div
                                class="item"
                                @click="setTabs(7)"
                                v-if="ifOBDFlag">
                                里程
                            </div>
                            <div
                                class="item"
                                @click="setTabs(5)"
                                v-if="ifOBDFlag">
                                参数
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <RadioGroup
                            v-model="dateRadio"
                            @on-change="dateRadioFn">
                            <Radio
                                v-for="(val, index) in radiolist"
                                :key="index"
                                :label="val.id"
                                style="margin-right: 15px">
                                <span style="color: var(--themeColor)">{{ val.name }}</span>
                            </Radio>
                        </RadioGroup>
                        <div class="right_box">
                            <div
                                class="arrow_left"
                                @click="prevFn">
                                <Icon type="md-arrow-dropleft" />
                            </div>
                            <DatePicker
                                type="date"
                                :options="options"
                                :editable="false"
                                :clearable="false"
                                v-if="dateRadio == 1 || dateRadio == 3"
                                :disabled="dateRadio == 1"
                                placeholder="请选择开始日期"
                                style="width: 2rem; margin-right: 10px"
                                format="yyyy-MM-dd"
                                v-model="workEenterTime"
                                @on-change="getworkStartTime"></DatePicker>
                            <DatePicker
                                :type="dateRadio == 2 ? 'month' : 'date'"
                                :editable="false"
                                :clearable="false"
                                :options="options"
                                placeholder="请选择结束日期"
                                style="width: 2rem"
                                :format="dateRadio == 2 ? 'yyyy-MM' : 'yyyy-MM-dd'"
                                v-model="day"
                                @on-change="getworkTime"></DatePicker>
                            <div
                                class="arrow_right"
                                v-show="!timeFlag"
                                @click="nextFn">
                                <Icon type="md-arrow-dropright" />
                            </div>
                            <div
                                class="arrow_right"
                                v-show="timeFlag">
                                <Icon
                                    type="md-arrow-dropright"
                                    style="color: #eee; cursor: not-allowed" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workLineBc"></div>
                <div
                    class="canvas"
                    v-show="dateRadio === 0">
                    <div class="left">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>统计图表</span>
                            </h2>
                        </div>
                        <div class="workDayCanvas">
                            <div class="canvas_left">
                                <div
                                    id="workDayCanvas"
                                    v-if="dateRadio === 0"
                                    :style="{ height: '2rem', width: '3.5rem' }"></div>
                            </div>
                            <div class="canvas_right">
                                <ul class="list">
                                    <li>
                                        <span
                                            class="radius"
                                            style="background: #619cec"></span>
                                        <span class="name">停机</span>
                                        <span class="sub">停机时长（h）：{{ stopTimes }} </span>
                                    </li>
                                    <li>
                                        <span
                                            class="radius"
                                            style="background: #28c81e"></span>
                                        <span class="name">工作</span>
                                        <span class="sub">工作时长（h）：{{ workTimes }} </span>
                                    </li>
                                    <li>
                                        <span
                                            class="radius"
                                            style="background: #ff410a"></span>
                                        <span class="name">怠机</span>
                                        <span class="sub">怠机时长（h）：{{ idleTimes }} </span>
                                    </li>
                                    <li>
                                        <span
                                            class="radius"
                                            style="background: #999999"></span>
                                        <span class="name">离线</span>
                                        <span class="sub">离线时长（h）：{{ offlineTimes }} </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="lineBox">
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <div class="timebox">
                                <span>3点</span>
                                <span>6点</span>
                                <span>9点</span>
                                <span>12点</span>
                                <span>15点</span>
                                <span>18点</span>
                                <span>21点</span>
                                <span>24点</span>
                            </div>
                            <div class="box">
                                <p
                                    v-for="(val, i) in Tlist"
                                    :key="i"
                                    :style="{
                                        height: 350 / Tlist.length + 'px',
                                        width: (val.times / 24 / 3600) * 100 + '%',
                                        left:
                                            new Date(val.endTime.substring(0, 10) + ' 00:00:00').getTime() > new Date(val.startTime).getTime()
                                                ? 0
                                                : ((parseInt(val.startTime.substring(11, 13)) * 3600 +
                                                      parseInt(val.startTime.substring(14, 16)) * 60 +
                                                      parseInt(val.startTime.substring(17, 19))) /
                                                      86400) *
                                                      100 +
                                                  '%',
                                        bottom: (350 / Tlist.length) * i + 'px',
                                    }">
                                    <el-tooltip
                                        placement="top"
                                        :content="val.date">
                                        <span
                                            v-if="val.workState == 2"
                                            :style="{ background: '#FF410A' }"></span>
                                        <span
                                            v-if="val.workState == 1"
                                            :style="{ background: '#619CEC' }"></span>
                                        <span
                                            v-if="val.workState == 3"
                                            :style="{ background: '#28C81E' }"></span>
                                        <span
                                            v-if="val.netState == 0"
                                            :style="{ background: '#999999' }"></span>
                                    </el-tooltip>
                                </p>
                            </div>
                            <div class="lineItem one"></div>
                            <div class="lineItem two"></div>
                            <div class="lineItem three"></div>
                            <div class="lineItem four"></div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>数据详情</span>
                            </h2>
                        </div>
                        <div class="tabsBox">
                            <Tabs
                                v-model="tabActiveName"
                                @on-click="getWorkStateType">
                                <TabPane
                                    :label="item.name"
                                    :name="String(item.id)"
                                    v-for="(item, index) in workStatelist"
                                    :key="index"></TabPane>
                            </Tabs>
                        </div>
                        <div
                            class="tableBox"
                            style="padding-top: 15px">
                            <div class="tableList">
                                <el-table
                                    ref="tableList"
                                    :data="workStateTypeList"
                                    style="width: 100%"
                                    height="6rem"
                                    :stripe="true">
                                    <template slot="empty">
                                        <div
                                            class="no_lsit"
                                            style="width: 96%; margin: auto">
                                            <img
                                                src="../../assets/images/common/rotary_nodata.png"
                                                style="width: 100%; height: 100%" />
                                        </div>
                                    </template>
                                    <el-table-column
                                        align="center"
                                        prop="date"
                                        label="时间"></el-table-column>
                                    <el-table-column
                                        align="center"
                                        prop="workState"
                                        label="状态">
                                        <template slot-scope="scope">
                                            <span
                                                v-if="scope.row.netState == 0"
                                                style="color: #ff4848"
                                                >离线</span
                                            >
                                            <span
                                                v-if="scope.row.workState == 1"
                                                style="color: #a9b0bb"
                                                >停机</span
                                            >
                                            <span
                                                v-if="scope.row.workState == 2"
                                                style="color: #ffa64d"
                                                >怠机</span
                                            >
                                            <span
                                                v-if="scope.row.workState == 3"
                                                style="color: #28d79c"
                                                >工作</span
                                            >
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        align="center"
                                        prop="duration"
                                        label="时长"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>

                <div
                    class="canvas canvasBox"
                    v-show="dateRadio !== 0">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>统计图表</span>
                        </h2>
                    </div>
                    <div
                        class="canvas_top"
                        style="margin-bottom: 0">
                        <div class="item">
                            <div class="item_left">
                                <img src="../../assets/images/mach/common/mach_time.png" />
                            </div>
                            <div class="item_right">
                                <div class="p">日均工作时长</div>
                                <div class="p">{{ workTimes }} h</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item_left">
                                <img src="../../assets/images/mach/common/mach_time.png" />
                            </div>
                            <div class="item_right">
                                <div class="p">日均怠机时长</div>
                                <div class="p">{{ idleTimes }} h</div>
                            </div>
                        </div>
                    </div>
                    <div class="canvas_bottom">
                        <div
                            class="canvas_none"
                            style="position: absolute; width: 80%; top: 10%; left: 50%; transform: translateX(-50%); height: pxToRem(220)"
                            v-if="dateList.length == 0">
                            <img
                                src="../../assets/images/common/canvas_none1.png"
                                alt="" />
                        </div>
                        <div
                            v-show="dateRadio !== 0"
                            id="workline"
                            :style="{ height: '4.3rem', width: '100%' }"></div>
                    </div>
                </div>
            </div>
            <div
                class="RADAR container"
                v-show="tabs == 4">
                <div class="search">
                    <div class="left">
                        <div class="btnList">
                            <div
                                class="item"
                                @click="setTabs(1)">
                                轨迹
                            </div>
                            <div
                                class="item"
                                @click="setTabs(2)">
                                工时
                            </div>
                            <div
                                class="item"
                                @click="setTabs(3)"
                                v-if="!ifOBDFlag">
                                油耗
                            </div>
                            <div
                                class="item active"
                                @click="setTabs(4)"
                                v-if="!ifOBDFlag">
                                指数
                            </div>
                            <div
                                class="item"
                                @click="setTabs(5)"
                                v-if="ifOBDFlag">
                                参数
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <RadioGroup
                            v-model="dateRadio"
                            @on-change="dateRadioFn">
                            <Radio
                                v-for="(val, index) in radiolist"
                                :key="index"
                                :label="val.id"
                                style="margin-right: 15px">
                                <span style="color: var(--themeColor)">{{ val.name }}</span>
                            </Radio>
                        </RadioGroup>
                        <div class="right_box">
                            <div
                                class="arrow_left"
                                @click="prevFn">
                                <Icon type="md-arrow-dropleft" />
                            </div>
                            <DatePicker
                                type="date"
                                :options="options"
                                :editable="false"
                                :clearable="false"
                                v-if="dateRadio == 1 || dateRadio == 3"
                                :disabled="dateRadio == 1"
                                placeholder="请选择开始日期"
                                style="width: 2rem; margin-right: 10px"
                                format="yyyy-MM-dd"
                                v-model="workEenterTime"
                                @on-change="getworkStartTime"></DatePicker>
                            <DatePicker
                                :type="dateRadio == 2 ? 'month' : 'date'"
                                :editable="false"
                                :clearable="false"
                                :options="options"
                                placeholder="请选择结束日期"
                                style="width: 2rem"
                                :format="dateRadio == 2 ? 'yyyy-MM' : 'yyyy-MM-dd'"
                                v-model="day"
                                @on-change="getworkTime"></DatePicker>
                            <div
                                class="arrow_right"
                                v-show="!timeFlag"
                                @click="nextFn">
                                <Icon type="md-arrow-dropright" />
                            </div>
                            <div
                                class="arrow_right"
                                v-show="timeFlag">
                                <Icon
                                    type="md-arrow-dropright"
                                    style="color: #eee; cursor: not-allowed" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="radarLineBc"></div>
                <div class="canvas canvasBox">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>设备指数</span>
                        </h2>
                    </div>
                    <div class="canvas_top">
                        <div class="item">
                            <div class="item_left">
                                <img src="../../assets/images/mach/data/mach_radar.png" />
                            </div>
                            <div class="item_right">
                                <div class="p">综合效率指数</div>
                                <div class="p">{{ generalExp }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="canvas_bottom">
                        <div
                            id="radar"
                            :style="{ height: '300px', width: '100%' }"></div>
                    </div>
                </div>
            </div>
            <div
                class="OIL container"
                v-show="tabs == 3">
                <div class="search">
                    <div class="left">
                        <div class="btnList">
                            <div
                                class="item"
                                @click="setTabs(1)">
                                轨迹
                            </div>
                            <div
                                class="item"
                                @click="setTabs(2)">
                                工时
                            </div>
                            <div
                                class="item active"
                                @click="setTabs(3)"
                                v-if="!ifOBDFlag">
                                油耗
                            </div>
                            <div
                                class="item"
                                @click="setTabs(4)"
                                v-if="!ifOBDFlag">
                                指数
                            </div>
                            <div
                                class="item"
                                @click="setTabs(6)"
                                v-if="ifOBDFlag">
                                油耗
                            </div>
                            <div
                                class="item"
                                @click="setTabs(7)"
                                v-if="ifOBDFlag">
                                里程
                            </div>
                            <div
                                class="item"
                                @click="setTabs(5)"
                                v-if="ifOBDFlag">
                                参数
                            </div>
                        </div>
                        <div class="btn">
                            <el-button
                                type="primary"
                                @click="getMachOilAddBtn"
                                v-preventReClick="1500"
                                >+ 标定</el-button
                            >
                        </div>
                    </div>
                    <div class="right">
                        <RadioGroup
                            v-model="dateRadio"
                            @on-change="dateRadioFn">
                            <Radio
                                v-for="(val, index) in oilRadiolist"
                                :key="index"
                                :label="val.id"
                                style="margin-right: 15px">
                                <span style="color: var(--themeColor)">{{ val.name }}</span>
                            </Radio>
                        </RadioGroup>
                        <div class="right_box">
                            <div
                                class="arrow_left"
                                @click="prevFn">
                                <Icon type="md-arrow-dropleft" />
                            </div>
                            <DatePicker
                                type="date"
                                :options="options"
                                :editable="false"
                                :clearable="false"
                                v-if="dateRadio == 1 || dateRadio == 3"
                                :disabled="dateRadio == 1"
                                placeholder="请选择开始日期"
                                style="width: 2rem; margin-right: 10px"
                                format="yyyy-MM-dd"
                                v-model="workEenterTime"
                                @on-change="getworkStartTime"></DatePicker>
                            <DatePicker
                                :type="dateRadio == 2 ? 'month' : 'date'"
                                :editable="false"
                                :clearable="false"
                                :options="options"
                                placeholder="请选择结束日期"
                                style="width: 2rem"
                                :format="dateRadio == 2 ? 'yyyy-MM' : 'yyyy-MM-dd'"
                                v-model="day"
                                @on-change="getworkTime"></DatePicker>
                            <div
                                class="arrow_right"
                                v-show="!timeFlag"
                                @click="nextFn">
                                <Icon type="md-arrow-dropright" />
                            </div>
                            <div
                                class="arrow_right"
                                v-show="timeFlag">
                                <Icon
                                    type="md-arrow-dropright"
                                    style="color: #eee; cursor: not-allowed" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oilLineBc"></div>
                <div class="canvas">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>设备油量</span>
                        </h2>
                    </div>
                    <div class="remainOil">
                        <div
                            class="canvas_none"
                            v-if="remainOilList.length == 0">
                            <img src="../../assets/images/common/canvas_none1.png" />
                        </div>
                        <div
                            id="remainOil"
                            :style="{ height: '2.5rem', width: '100%' }"></div>
                    </div>
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>设备油耗</span>
                        </h2>
                    </div>
                    <div class="canvas_top">
                        <div
                            class="canvas_left"
                            v-show="dateRadio == 0">
                            <div class="item">
                                <div class="item_left">
                                    <img src="../../assets/images/mach/common/mach_oil.png" />
                                </div>
                                <div class="item_right">
                                    <div class="p">总油耗量</div>
                                    <div class="p">{{ oilWear }} L</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_left">
                                    <img src="../../assets/images/mach/common/mach_oil.png" />
                                </div>
                                <div class="item_right">
                                    <div class="p">总加油量</div>
                                    <div class="p">{{ oilAdd }} L</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_left">
                                    <img src="../../assets/images/mach/common/mach_oil.png" />
                                </div>
                                <div class="item_right">
                                    <div class="p">总标定加油量</div>
                                    <div class="p">{{ setOilAdd }} L</div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="canvas_left"
                            v-show="dateRadio != 0">
                            <div class="item">
                                <div class="item_left">
                                    <img src="../../assets/images/mach/common/mach_oil.png" />
                                </div>
                                <div class="item_right">
                                    <div class="p">日均耗油量</div>
                                    <div class="p">{{ avgOilWearNum }} L</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_left">
                                    <img src="../../assets/images/mach/common/mach_oil.png" />
                                </div>
                                <div class="item_right">
                                    <div class="p">日均加油量</div>
                                    <div class="p">{{ avgOilAddNum }} L</div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="canvas_right"
                            v-if="Olist.length > 0 && dateRadio == 0">
                            <ul class="list">
                                <li>
                                    <span
                                        class="radius"
                                        style="background: rgb(254, 59, 7)"></span>
                                    <span class="name">怠机</span>
                                </li>
                                <li>
                                    <span
                                        class="radius"
                                        style="background: rgb(40, 200, 30)"></span>
                                    <span class="name">工作</span>
                                </li>

                                <li>
                                    <span
                                        class="radius"
                                        style="background: rgb(97, 156, 236)"></span>
                                    <span class="name">停机</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div
                        class="canvas_bottom"
                        v-show="dateRadio == 0">
                        <div class="lineBox">
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <div class="timebox">
                                <span>3点</span>
                                <span>6点</span>
                                <span>9点</span>
                                <span>12点</span>
                                <span>15点</span>
                                <span>18点</span>
                                <span>21点</span>
                                <span>24点</span>
                            </div>
                            <div class="lineBottomBox">
                                <p
                                    v-for="(val, i) in Olist"
                                    :key="i"
                                    :style="{
                                        height: '10px',
                                        width: (val.times / 24 / 3600) * 100 + '%',
                                        left:
                                            new Date(val.endTime.substring(0, 10) + ' 00:00:00').getTime() > new Date(val.startTime).getTime()
                                                ? 0
                                                : ((parseInt(val.startTime.substring(11, 13)) * 3600 +
                                                      parseInt(val.startTime.substring(14, 16)) * 60 +
                                                      parseInt(val.startTime.substring(17, 19))) /
                                                      86400) *
                                                      100 +
                                                  '%',
                                    }">
                                    <span
                                        v-if="val.workState == 2"
                                        :style="{ background: '#FF410A' }"></span>
                                    <span
                                        v-if="val.workState == 1"
                                        :style="{ background: '#619CEC' }"></span>
                                    <span
                                        v-if="val.workState == 3"
                                        :style="{ background: '#28C81E' }"></span>
                                </p>
                            </div>
                            <div class="lineItem one"></div>
                            <div class="lineItem two"></div>
                            <div class="lineItem three"></div>
                            <div class="lineItem four"></div>
                        </div>
                    </div>
                    <div
                        class="canvas_bottom"
                        v-show="dateRadio != 0">
                        <div
                            id="oilWear"
                            :style="{ height: '3rem', width: '100%' }"></div>
                    </div>
                </div>
            </div>
            <div
                class="OBD container"
                v-show="tabs == 5">
                <div class="search">
                    <div class="btnList">
                        <div
                            class="item"
                            @click="setTabs(1)">
                            轨迹
                        </div>
                        <div
                            class="item"
                            @click="setTabs(2)">
                            工时
                        </div>
                        <div
                            class="item"
                            @click="setTabs(3)"
                            v-if="!ifOBDFlag">
                            油耗
                        </div>
                        <div
                            class="item"
                            @click="setTabs(4)"
                            v-if="!ifOBDFlag">
                            指数
                        </div>
                        <div
                            class="item"
                            @click="setTabs(6)"
                            v-if="ifOBDFlag">
                            油耗
                        </div>
                        <div
                            class="item"
                            @click="setTabs(7)"
                            v-if="ifOBDFlag">
                            里程
                        </div>
                        <div
                            class="item active"
                            @click="setTabs(5)"
                            v-if="ifOBDFlag">
                            参数
                        </div>
                    </div>
                    <div class="com_box">
                        <div class="com_class">
                            <div class="left">
                                <img src="../../assets/images/mach/data/mach_nz.png" />
                            </div>
                            <div class="right">
                                <span>时间：</span>
                                <span>{{ OBDTime }}</span>
                            </div>
                        </div>
                        <div class="com_class">
                            <div class="left">
                                <img src="../../assets/images/mach/data/mach_zt.png" />
                            </div>
                            <div class="right">
                                <span>状态：</span>
                                <span
                                    v-if="OBDWorkState == 0"
                                    style="color: #ff4848"
                                    >离线</span
                                >
                                <span
                                    v-if="OBDWorkState == 1"
                                    style="color: #a9b0bb"
                                    >停机</span
                                >
                                <span
                                    v-if="OBDWorkState == 2"
                                    style="color: #ffa64d"
                                    >怠机</span
                                >
                                <span
                                    v-if="OBDWorkState == 3"
                                    style="color: #28d79c"
                                    >工作</span
                                >
                            </div>
                        </div>
                        <div class="com_class">
                            <div
                                :class="['left', 'bg', 60 < batteryPower ? 'bg1' : 20 < batteryPower ? 'bg2' : 'bg3']"
                                style="width: 0.48rem; height: 0.28rem">
                                <div
                                    class="com_class_bc"
                                    :style="[
                                        { width: 0.4 * (batteryPower / 100) + 'rem' },
                                        { background: 60 < batteryPower ? '#24B034' : 20 < batteryPower ? '#F4B71D' : '#EA6061' },
                                    ]"></div>
                            </div>
                            <div class="right">
                                <span>电量：</span>
                                <span v-if="batteryPower > 0">{{ batteryPower }}%</span>
                                <span v-else>—</span>
                            </div>
                        </div>
                        <div class="switch com_class">
                            <span>实时刷新：</span>
                            <el-switch
                                v-model="switchFlag"
                                active-color="#1891ff"
                                inactive-color="#D3D3D3"></el-switch>
                        </div>
                    </div>
                </div>
                <div class="OBDLineBc"></div>
                <div class="tableBox">
                    <div class="tabsBox">
                        <Tabs v-model="tabActiveNameOBD">
                            <TabPane
                                :label="item.num != undefined ? ` ${item.name}(${item.num})` : item.name"
                                :name="String(item.id)"
                                v-for="(item, index) in machOBDList"
                                :key="index"></TabPane>
                        </Tabs>
                    </div>
                    <ul
                        :class="['tableList', tabActiveNameOBD == 6 ? 'engineFault_table' : '']"
                        v-if="resOBDList.length > 0">
                        <template v-if="tabActiveNameOBD == 4">
                            <li
                                class="item"
                                v-for="(item, index) in resOBDList"
                                :key="index"
                                :style="{ border: item.value == 1 ? '1px solid #FF0000' : '1px solid #eee' }">
                                <div class="left">{{ getNameFn(item.code) }}</div>
                                <div
                                    class="right"
                                    v-if="item.value != '—'">
                                    <span
                                        v-if="item.value == 1"
                                        style="color: #ff0107"
                                        >故障</span
                                    >
                                    <span v-else>正常</span>
                                </div>
                                <div
                                    class="right"
                                    v-else>
                                    <span>—</span>
                                </div>
                            </li>
                        </template>
                        <template v-if="tabActiveNameOBD == 5">
                            <li
                                class="item"
                                v-for="(item, index) in resOBDList"
                                :key="index"
                                :style="{ border: item.value == 1 ? '1px solid #FF0000' : '1px solid #eee' }">
                                <div class="left">{{ getNameFn(item.code) }}</div>
                                <div
                                    class="right"
                                    v-if="item.value != '—'">
                                    <span
                                        v-if="item.value == 1"
                                        style="color: #ff0107"
                                        >有报警</span
                                    >
                                    <span v-else>无报警</span>
                                </div>
                                <div
                                    class="right"
                                    v-else>
                                    <span>—</span>
                                </div>
                            </li>
                        </template>
                        <template v-if="tabActiveNameOBD == 6">
                            <li
                                class="item engineFault"
                                v-if="currentFaultList.length > 0">
                                <div class="p_top">
                                    <div class="p_title">当前故障</div>
                                </div>
                                <div class="p_content">
                                    <div class="p_bottom">
                                        <div
                                            :class="['p_box', historyFaultList.length == 0 ? 'width24' : 'width49']"
                                            v-for="(item, index) in currentFaultList"
                                            :key="index">
                                            <div
                                                class="p_info"
                                                style="width: 100%">
                                                <div
                                                    class="p"
                                                    style="
                                                        width: 100%;
                                                        display: flex;
                                                        justify-content: space-between;
                                                        align-items: center;
                                                        margin-bottom: 0.05rem;
                                                    ">
                                                    <div class="left">故障数量</div>
                                                    <div
                                                        class="right"
                                                        style="
                                                            width: 60%;
                                                            white-space: nowrap;
                                                            overflow: hidden;
                                                            text-overflow: ellipsis;
                                                            text-align: right;
                                                            display: block;
                                                        ">
                                                        {{ item.value.oc }}
                                                    </div>
                                                </div>
                                                <div
                                                    class="p"
                                                    style="
                                                        width: 100%;
                                                        display: flex;
                                                        justify-content: space-between;
                                                        align-items: center;
                                                        margin-bottom: 0.05rem;
                                                    ">
                                                    <div class="left">S P N 码</div>
                                                    <div
                                                        class="right"
                                                        style="
                                                            width: 60%;
                                                            white-space: nowrap;
                                                            overflow: hidden;
                                                            text-overflow: ellipsis;
                                                            text-align: right;
                                                            display: block;
                                                        ">
                                                        {{ item.value.spn }}
                                                    </div>
                                                </div>
                                                <div
                                                    class="p"
                                                    style="
                                                        width: 100%;
                                                        display: flex;
                                                        justify-content: space-between;
                                                        align-items: center;
                                                        margin-bottom: 0.05rem;
                                                    ">
                                                    <div class="left">F M I 码</div>
                                                    <div
                                                        class="right"
                                                        style="
                                                            width: 60%;
                                                            white-space: nowrap;
                                                            overflow: hidden;
                                                            text-overflow: ellipsis;
                                                            text-align: right;
                                                            display: block;
                                                        ">
                                                        {{ item.value.fmi }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li
                                class="item engineFault"
                                v-if="historyFaultList.length > 0">
                                <div class="p_top">
                                    <div class="p_title">历史故障</div>
                                </div>
                                <div class="p_content">
                                    <div class="p_bottom">
                                        <div
                                            :class="['p_box', currentFaultList.length == 0 ? 'width24' : 'width49']"
                                            v-for="(item, index) in historyFaultList"
                                            :key="index">
                                            <div
                                                class="p_info"
                                                style="width: 100%">
                                                <div
                                                    class="p"
                                                    style="
                                                        width: 100%;
                                                        display: flex;
                                                        justify-content: space-between;
                                                        align-items: center;
                                                        margin-bottom: 0.05rem;
                                                    ">
                                                    <div class="left">故障数量</div>
                                                    <div
                                                        class="right"
                                                        style="
                                                            width: 60%;
                                                            white-space: nowrap;
                                                            overflow: hidden;
                                                            text-overflow: ellipsis;
                                                            text-align: right;
                                                            display: block;
                                                        ">
                                                        {{ item.value.oc }}
                                                    </div>
                                                </div>
                                                <div
                                                    class="p"
                                                    style="
                                                        width: 100%;
                                                        display: flex;
                                                        justify-content: space-between;
                                                        align-items: center;
                                                        margin-bottom: 0.05rem;
                                                    ">
                                                    <div class="left">S P N 码</div>
                                                    <div
                                                        class="right"
                                                        style="
                                                            width: 60%;
                                                            white-space: nowrap;
                                                            overflow: hidden;
                                                            text-overflow: ellipsis;
                                                            text-align: right;
                                                            display: block;
                                                        ">
                                                        {{ item.value.spn }}
                                                    </div>
                                                </div>
                                                <div
                                                    class="p"
                                                    style="
                                                        width: 100%;
                                                        display: flex;
                                                        justify-content: space-between;
                                                        align-items: center;
                                                        margin-bottom: 0.05rem;
                                                    ">
                                                    <div class="left">F M I 码</div>
                                                    <div
                                                        class="right"
                                                        style="
                                                            width: 60%;
                                                            white-space: nowrap;
                                                            overflow: hidden;
                                                            text-overflow: ellipsis;
                                                            text-align: right;
                                                            display: block;
                                                        ">
                                                        {{ item.value.fmi }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </template>
                        <template v-if="tabActiveNameOBD == 1 || tabActiveNameOBD == 2 || tabActiveNameOBD == 3">
                            <li
                                class="item"
                                v-for="(item, index) in resOBDList"
                                :key="index">
                                <div class="left">{{ getNameFn(item.code) }}</div>
                                <div
                                    class="right"
                                    v-if="item.code == 'Brake1'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_kq.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_zd.png"
                                                v-else />
                                        </div>
                                        <span style="color: #606260">{{ item.value == 1 ? "开启" : "制动" }}</span>
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'Brake2'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_kq.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_zd.png"
                                                v-else />
                                        </div>
                                        <span style="color: #606260">{{ item.value == 1 ? "开启" : "制动" }}</span>
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'Work_select1'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_qygj.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_zl.png"
                                                v-else />
                                        </div>
                                        <span style="color: #606260">{{ item.value == 1 ? "牵引工况" : "张力工况" }}</span>
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'Work_select2'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_qygj.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_zl.png"
                                                v-else />
                                        </div>
                                        <span style="color: #606260">{{ item.value == 1 ? "牵引工况" : "张力工况" }}</span>
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'Control_mode'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_yc.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_kz.png"
                                                v-else />
                                        </div>
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == 1"
                                            >远程控制</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-else
                                            >本地控制</span
                                        >
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'Fan_IN'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_kq.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_off.png"
                                                v-else />
                                        </div>
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == 1"
                                            >开启</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-else
                                            >关闭</span
                                        >
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'Fan_WORK'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_gz.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_stop.png"
                                                v-else />
                                        </div>
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == 1"
                                            >工作</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-else
                                            >停止</span
                                        >
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'count_set1'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_js1.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_js2.png"
                                                v-else />
                                        </div>
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == 1"
                                            >清零</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-else
                                            >计数</span
                                        >
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'count_set2'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_js1.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_js2.png"
                                                v-else />
                                        </div>
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == 1"
                                            >清零</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-else
                                            >计数</span
                                        >
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'bParallel_status'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_bl.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_dl.png"
                                                v-else />
                                        </div>
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == 1"
                                            >并轮</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-else
                                            >独立</span
                                        >
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'brake_state'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_kq.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_off.png"
                                                v-else />
                                        </div>
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == 1"
                                            >开启</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-else
                                            >制动</span
                                        >
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'Work_mode'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_auto.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_manual.png"
                                                v-else />
                                        </div>
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == 1"
                                            >自动模式</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-else
                                            >手动模式</span
                                        >
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'dirObj'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_tractor.png"
                                                v-if="item.value == '0-1'"
                                                style="transform: rotate(180deg)" />
                                            <img
                                                src="../../assets/images/mach/data/mach_tractor.png"
                                                v-if="item.value == '1-0'" />
                                            <img
                                                src="../../assets/images/mach/data/mach_stop.png"
                                                v-if="item.value == '0-0'" />
                                        </div>
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == '0-1'"
                                            >送线</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == '1-0'"
                                            >牵引</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == '0-0'"
                                            >停止</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == '—'"
                                            >—</span
                                        >
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.code == 'work_condition'">
                                    <template v-if="item.value != '—'">
                                        <div class="icon">
                                            <img
                                                src="../../assets/images/mach/data/mach_qygj.png"
                                                v-if="item.value == 1" />
                                            <img
                                                src="../../assets/images/mach/data/mach_zl.png"
                                                v-else />
                                        </div>
                                        <span
                                            style="color: #606260"
                                            v-if="item.value == 1"
                                            >牵引工况</span
                                        >
                                        <span
                                            style="color: #606260"
                                            v-else
                                            >张力工况</span
                                        >
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                                <div
                                    class="right"
                                    v-if="item.unit">
                                    <template v-if="item.value != '—'">
                                        <span>{{ item.value }}</span>
                                        <span style="color: #606260">{{ item.unit }}</span>
                                    </template>
                                    <template v-else>
                                        <span>{{ item.value }}</span>
                                    </template>
                                </div>
                            </li>
                        </template>
                    </ul>
                    <div
                        class="no_lsit"
                        style="width: 80%; height: 80%; margin: auto"
                        v-if="resOBDList.length == 0">
                        <img
                            src="../../assets/images/common/rotary_nodata.png"
                            style="width: 100%; height: 100%" />
                    </div>
                </div>
            </div>
            <div
                class="OBDOIL container"
                v-show="tabs == 6">
                <div class="search">
                    <div class="left">
                        <div class="btnList">
                            <div
                                class="item"
                                @click="setTabs(1)">
                                轨迹
                            </div>
                            <div
                                class="item"
                                @click="setTabs(2)">
                                工时
                            </div>
                            <div
                                class="item"
                                @click="setTabs(3)"
                                v-if="!ifOBDFlag">
                                油耗
                            </div>
                            <div
                                class="item"
                                @click="setTabs(4)"
                                v-if="!ifOBDFlag">
                                指数
                            </div>
                            <div
                                class="item active"
                                @click="setTabs(6)"
                                v-if="ifOBDFlag">
                                油耗
                            </div>
                            <div
                                class="item"
                                @click="setTabs(7)"
                                v-if="ifOBDFlag">
                                里程
                            </div>
                            <div
                                class="item"
                                @click="setTabs(5)"
                                v-if="ifOBDFlag">
                                参数
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <RadioGroup
                            v-model="dateRadio"
                            @on-change="dateRadioFn">
                            <Radio
                                v-for="(val, index) in obdOilRadiolist"
                                :key="index"
                                :label="val.id"
                                style="margin-right: 15px">
                                <span style="color: #1891ff">{{ val.name }}</span>
                            </Radio>
                        </RadioGroup>
                        <div class="right_box">
                            <div
                                class="arrow_left"
                                @click="prevFn">
                                <Icon type="md-arrow-dropleft" />
                            </div>
                            <DatePicker
                                type="date"
                                :options="options"
                                :editable="false"
                                :clearable="false"
                                v-if="dateRadio == 1 || dateRadio == 3"
                                :disabled="dateRadio == 1"
                                placeholder="请选择开始日期"
                                style="width: 2rem; margin-right: 10px"
                                format="yyyy-MM-dd"
                                v-model="workEenterTime"
                                @on-change="getworkStartTime"></DatePicker>
                            <DatePicker
                                :type="dateRadio == 2 ? 'month' : 'date'"
                                :editable="false"
                                :clearable="false"
                                :options="options"
                                placeholder="请选择结束日期"
                                style="width: 2rem"
                                :format="dateRadio == 2 ? 'yyyy-MM' : 'yyyy-MM-dd'"
                                v-model="day"
                                @on-change="getworkTime"></DatePicker>
                            <div
                                class="arrow_right"
                                v-show="!timeFlag && dateRadio != 1"
                                @click="nextFn">
                                <Icon type="md-arrow-dropright" />
                            </div>
                            <div
                                class="arrow_right"
                                v-show="timeFlag">
                                <Icon
                                    type="md-arrow-dropright"
                                    style="color: #eee; cursor: not-allowed" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lineBc"></div>
                <div class="canvas">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>设备油耗</span>
                        </h2>
                    </div>
                    <div class="canvas_top">
                        <div class="canvas_box">
                            <div class="item">
                                <div class="item_left">
                                    <img src="../../assets/images/mach/common/mach_oil.png" />
                                </div>
                                <div class="item_right">
                                    <div class="p">累计油耗量</div>
                                    <div class="p">{{ totalOilWear }} L</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_left">
                                    <img src="../../assets/images/mach/common/mach_oil.png" />
                                </div>
                                <div class="item_right">
                                    <div class="p">日均油耗量</div>
                                    <div class="p">{{ avgOilWear }} L</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="canvas_bottom">
                        <div class="remainOil">
                            <div
                                id="avgOilWearLine"
                                :style="{ height: '4rem', width: '100%' }"></div>
                            <div
                                class="canvas_none"
                                v-if="oilWearList.length == 0">
                                <img src="../../assets/images/common/canvas_none1.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="OBDMILE container"
                v-show="tabs == 7">
                <div class="search">
                    <div class="left">
                        <div class="btnList">
                            <div
                                class="item"
                                @click="setTabs(1)">
                                轨迹
                            </div>
                            <div
                                class="item"
                                @click="setTabs(2)">
                                工时
                            </div>
                            <div
                                class="item"
                                @click="setTabs(3)"
                                v-if="!ifOBDFlag">
                                油耗
                            </div>
                            <div
                                class="item"
                                @click="setTabs(4)"
                                v-if="!ifOBDFlag">
                                指数
                            </div>
                            <div
                                class="item"
                                @click="setTabs(6)"
                                v-if="ifOBDFlag">
                                油耗
                            </div>
                            <div
                                class="item active"
                                @click="setTabs(7)"
                                v-if="ifOBDFlag">
                                里程
                            </div>
                            <div
                                class="item"
                                @click="setTabs(5)"
                                v-if="ifOBDFlag">
                                参数
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <RadioGroup
                            v-model="dateRadio"
                            @on-change="dateRadioFn">
                            <Radio
                                v-for="(val, index) in obdOilRadiolist"
                                :key="index"
                                :label="val.id"
                                style="margin-right: 15px">
                                <span style="color: #1891ff">{{ val.name }}</span>
                            </Radio>
                        </RadioGroup>
                        <div class="right_box">
                            <div
                                class="arrow_left"
                                @click="prevFn">
                                <Icon type="md-arrow-dropleft" />
                            </div>
                            <DatePicker
                                type="date"
                                :options="options"
                                :editable="false"
                                :clearable="false"
                                v-if="dateRadio == 1 || dateRadio == 3"
                                :disabled="dateRadio == 1"
                                placeholder="请选择开始日期"
                                style="width: 2rem; margin-right: 10px"
                                format="yyyy-MM-dd"
                                v-model="workEenterTime"
                                @on-change="getworkStartTime"></DatePicker>
                            <DatePicker
                                :type="dateRadio == 2 ? 'month' : 'date'"
                                :editable="false"
                                :clearable="false"
                                :options="options"
                                placeholder="请选择结束日期"
                                style="width: 2rem"
                                :format="dateRadio == 2 ? 'yyyy-MM' : 'yyyy-MM-dd'"
                                v-model="day"
                                @on-change="getworkTime"></DatePicker>
                            <div
                                class="arrow_right"
                                v-show="!timeFlag"
                                @click="nextFn">
                                <Icon type="md-arrow-dropright" />
                            </div>
                            <div
                                class="arrow_right"
                                v-show="timeFlag">
                                <Icon
                                    type="md-arrow-dropright"
                                    style="color: #eee; cursor: not-allowed" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lineBc"></div>
                <div class="canvas">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>设备日放线总里程</span>
                        </h2>
                    </div>
                    <div class="canvas_top">
                        <div class="canvas_left">
                            <div class="item">
                                <div class="item_top">累计放线总里程</div>
                                <div class="item_bottom">
                                    <div class="item_box">
                                        <div class="p">里程</div>
                                        <div class="p">
                                            <span>{{ totalMile }}</span> <span style="font-size: 0.14rem">m</span>
                                        </div>
                                    </div>
                                    <div class="item_box">
                                        <div class="p">工效</div>
                                        <div class="p">
                                            <span>{{ mileEffic }}</span> <span style="font-size: 0.14rem"> m/天</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="item"
                                v-show="machTypeId == 147">
                                <!-- <div class="item_left">
                                    <img src="../../assets/images/mach/data/mach_mile.png" alt="" >
                                </div> -->
                                <div class="item_top">累计放线总里程1</div>
                                <div class="item_bottom">
                                    <div class="item_box">
                                        <div class="p">里程</div>
                                        <div class="p">
                                            <span>{{ totalMile1 }}</span> <span style="font-size: 0.14rem"> m</span>
                                        </div>
                                    </div>
                                    <div class="item_box">
                                        <div class="p">工效</div>
                                        <div class="p">
                                            <span>{{ mileEffic1 }}</span> <span style="font-size: 0.14rem"> m/天</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="item"
                                v-show="machTypeId == 147">
                                <div class="item_top">累计放线总里程2</div>
                                <div class="item_bottom">
                                    <div class="item_box">
                                        <div class="p">里程</div>
                                        <div class="p">
                                            <span>{{ totalMile2 }}</span> <span style="font-size: 0.14rem"> m</span>
                                        </div>
                                    </div>
                                    <div class="item_box">
                                        <div class="p">工效</div>
                                        <div class="p">
                                            <span>{{ mileEffic2 }}</span> <span style="font-size: 0.14rem"> m/天</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="remainOil">
                        <div
                            class="canvas_none"
                            v-if="totalMileList.length == 0">
                            <img src="../../assets/images/common/canvas_none1.png" />
                        </div>
                        <div
                            id="avgMileLine"
                            :style="{ height: '4.3rem', width: '100%' }"></div>
                    </div>
                </div>
            </div>
        </div>

        <Modal
            v-model="oilAddFlag"
            title="标定加油量"
            width="700px"
            :mask-closable="false"
            class-name="addModal"
            :closable="false">
            <div class="addMsg oildAdd">
                <div
                    class="close"
                    @click="cancel(1)">
                    <Icon
                        type="ios-close-circle"
                        style="color: #fff; font-size: 20px" />
                </div>
                <div class="info">
                    <div
                        class="infoBox"
                        style="padding: 0 20px">
                        <div
                            class="left"
                            style="width: 98%; margin: auto">
                            <div class="list">
                                <div
                                    class="listBox"
                                    style="width: 100%; display: flex; justify-content: space-between; align-items: center">
                                    <div class="item_box">
                                        <span class="span">标定日期:</span>
                                        <div
                                            class="arrow_left"
                                            @click="oilAddRrevFn">
                                            <Icon type="md-arrow-dropleft" />
                                        </div>
                                        <DatePicker
                                            transfer
                                            type="date"
                                            placeholder="请选择日期"
                                            style="width: 200px"
                                            format="yyyy-MM-dd"
                                            @on-change="oilAddDateFn"
                                            :options="options"
                                            v-model="oilAddDate"
                                            :clearable="false"></DatePicker>
                                        <div
                                            class="arrow_right"
                                            v-show="!OBDTimeFlag"
                                            @click="oilAddNextFn">
                                            <Icon type="md-arrow-dropright" />
                                        </div>
                                        <div
                                            class="arrow_right"
                                            v-show="OBDTimeFlag">
                                            <Icon
                                                type="md-arrow-dropright"
                                                style="color: #eee; cursor: not-allowed" />
                                        </div>
                                    </div>
                                    <div class="btn">
                                        <el-button
                                            :disabled="oilAddListFlag"
                                            :type="oilAddListFlag ? 'info' : 'primary'"
                                            :style="{
                                                padding: '7px 25px',
                                                'border-radius': '15px',
                                                background: '#1891ff',
                                                border: oilAddListFlag ? '1px solid #c0c4cc' : '1px solid #1891ff',
                                            }"
                                            @click="oilAddFn"
                                            >+ 记录</el-button
                                        >
                                    </div>
                                </div>
                            </div>
                            <div
                                class="tableBox"
                                style="padding-top: 15px; width: 98%; margin: auto">
                                <div class="tableList">
                                    <el-table
                                        :data="oilAddList"
                                        style="width: 100%"
                                        height="330px"
                                        :stripe="true"
                                        :default-sort="{ prop: 'time', order: 'ascending' }">
                                        <template slot="empty">
                                            <div
                                                class="no_lsit"
                                                style="width: 96%; margin: auto">
                                                <img
                                                    src="../../assets/images/common/rotary_nodata.png"
                                                    style="width: 100%; height: 100%" />
                                            </div>
                                        </template>
                                        <el-table-column
                                            align="center"
                                            prop="time"
                                            label="时间">
                                            <template slot-scope="scope">
                                                <TimePicker
                                                    type="time"
                                                    placement="bottom-end"
                                                    placeholder="请选择时间"
                                                    style="width: 168px"
                                                    v-model="scope.row.time"
                                                    :clearable="false"
                                                    transfer></TimePicker>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            align="center"
                                            prop="oilAdd"
                                            label="数值">
                                            <template slot-scope="scope">
                                                +
                                                <Input
                                                    v-model="scope.row.oilAdd"
                                                    placeholder="请输入"
                                                    style="width: 100px"
                                                    clearable />
                                                L
                                                <input
                                                    type="password"
                                                    autocomplete="new-password"
                                                    style="display: none" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            align="center"
                                            prop="duration"
                                            label="操作">
                                            <template slot-scope="scope">
                                                <el-button
                                                    type="text"
                                                    @click="removeOilBtn(scope.$index)"
                                                    size="small"
                                                    style="color: red"
                                                    >删除</el-button
                                                >
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(1)"
                    style="padding: 7px 25px; border-radius: 15px; background: rgba(46, 104, 253, 0.16); border: 1px solid rgba(46, 104, 253, 0.16)"
                    type="info"
                    size="mini"
                    ><span style="color: #1891ff">取消</span>
                </el-button>
                <el-button
                    @click="setOilAddFn(oilAddDate, 1)"
                    type="primary"
                    style="padding: 7px 25px; border-radius: 15px; background: #1891ff; border: 1px solid #1891ff"
                    size="mini"
                    v-preventReClick="1500"
                    ><span style="color: #fff">确定</span></el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="isOilAddFlag"
            title="修改标定量"
            width="360px;"
            :mask-closable="false"
            class-name="addModal">
            <div style="margin: 10px">您是否确认保存修改标定量?</div>
            <div slot="footer">
                <el-button
                    @click="cancel(2)"
                    style="padding: 7px 25px; border-radius: 15px; background: rgba(46, 104, 253, 0.16); border: 1px solid rgba(46, 104, 253, 0.16)"
                    type="info"
                    size="mini"
                    ><span style="color: #1891ff">取消</span>
                </el-button>
                <el-button
                    @click="isOilAddFn"
                    type="primary"
                    style="padding: 7px 25px; border-radius: 15px; background: #1891ff; border: 1px solid #1891ff"
                    size="mini"
                    v-preventReClick="1500"
                    ><span style="color: #fff">确定</span></el-button
                >
            </div>
        </Modal>
    </div>
</template>
<script>
import {
    format,
    timeStamp,
    formatSeconds,
    closest,
    numMaxFn,
    getPreMonth,
    getNextMonth,
    initHMS,
    initYMD,
    initMD,
    initHM,
    initYMDHM,
    formatInItDate,
} from "@/sever/utils.js"
import { initOBD } from "@/mixins/machOBD.js"
import { initColors } from "@/mixins/colorObj.js"
import {
    getMachGPSLog_V1,
    getMachRadarData_V1,
    getMachWorkData_V1,
    getMachOilData_V1,
    getMachDataList_V1,
    getMachOilAdd_V1,
    setOilAdd_V1,
    getOBDGPSLogList_V1,
    getOBDGPSParamList_V1,
    getOBDOilDate_V1,
    getOBDMileDate_V1,
    getMachNumStat_v1,
    getMachGPSTransport,
} from "@/api/mach.js"
export default {
    mixins: [initOBD, initColors],
    data() {
        return {
            options: {
                disabledDate(date) {
                    return date > Date.now()
                },
            },
            list: [],
            keyword: "",
            machType: [],
            deptId: "",
            bindNum: 0,
            unbindNum: 0,
            pageNum: 1,
            pageSize: 20,
            totalCount: 0,
            pages: 1,
            tabs: 1,
            dateRadio: 0,
            workStateType: 0,
            workTimeCount: 0,
            generalExp: 0,
            oilMax: 200,
            toolTipFlag: -1,
            machTypeList: [],
            playbackList: [],
            lineArr: [],
            markers: "",
            workStateTypeList: [],
            Tlist: [],
            Olist: [],
            dateList: [],
            workTimesList: [],
            idleTimesList: [],
            randarlist: [],
            oilDayList: [],
            oilWear: "",
            oilList: [],
            remainOilList: [],
            remainOilPercentList: [],
            timeList: [],
            radiolist: [
                {
                    id: 0,
                    name: "按日",
                },
                {
                    id: 1,
                    name: "按周",
                },
                {
                    id: 2,
                    name: "按月",
                },
                {
                    id: 3,
                    name: "自定义",
                },
            ],
            oilRadiolist: [
                {
                    id: 0,
                    name: "按日",
                },
                {
                    id: 1,
                    name: "按周",
                },
                {
                    id: 2,
                    name: "按月",
                },
            ],
            obdOilRadiolist: [
                {
                    id: 1,
                    name: "按周",
                },
                {
                    id: 2,
                    name: "按月",
                },
                {
                    id: 3,
                    name: "自定义",
                },
            ],
            workStatelist: [
                {
                    id: -1,
                    name: "全部",
                },
                {
                    id: 3,
                    name: "工作",
                },
                {
                    id: 2,
                    name: "怠机",
                },
                {
                    id: 1,
                    name: "停机",
                },
                {
                    id: 0,
                    name: "离线",
                },
            ],
            tabActiveName: "-1",
            tabActiveNameOBD: "1",
            polyline: [],
            projectId: "",
            machId: "",
            map: "",
            icon: "",
            workTimes: "",
            idleTimes: "",
            stopTimes: "",
            offlineTimes: "",
            oilAdd: "",
            oilWear: "",
            avgOilWearNum: "",
            avgOilAddNum: "",
            setOilAdd: "",
            machTypeId: "",
            day: new Date(),
            workEenterTime: new Date(),
            imgFlag: false,
            playFlag: true,
            maxDate: new Date(),
            initFlag: false,
            oilAddDate: new Date(),
            oilAddList: [],
            oilAddFlag: false,
            isOilAddFlag: false,
            oilAddListFlag: false,
            cancelFlag: false,
            oilAddDateFlag: true,
            isOffFlag: false,
            ifOBDFlag: false,
            switchFlag: false,
            machOBDList: [
                {
                    id: 1,
                    name: "设备参数",
                },
                {
                    id: 2,
                    name: "系统参数",
                },
                {
                    id: 3,
                    name: "柴油机参数",
                },
                {
                    id: 4,
                    name: "系统故障",
                    num: 0,
                },
                {
                    id: 5,
                    name: "报警指示",
                    num: 0,
                },
                {
                    id: 6,
                    name: "柴油机故障",
                    num: 0,
                },
            ],
            resMachParamList: [],
            resSystemParams: [],
            resEngineMachParams: [],
            resSystemFault: [],
            resAarmIndication: [],
            resEngineFault: [],
            resOBDList: [],
            OBDTime: "",
            OBDWorkState: "",
            batteryPower: "",
            machTypeFlag: null,
            timeFlag: true,
            OBDTimeFlag: true,
            historyFaultList: [],
            currentFaultList: [],
            bindFlag: 1,
            oilWearList: [],
            totalOilWear: "",
            avgOilWear: "",
            totalMileList: [],
            dayMileList: [],
            mileName: "",
            avgMile: "",
            totalMile: "",
            mileEffic: "",
            totalMile1: "",
            mileEffic1: "",
            totalMile2: "",
            mileEffic2: "",
            mileList: [],
            totalLengthList1: [],
            totalLengthList2: [],
            colors: [
                "#FA5C90 ",
                "#46D9FF ",
                "#4990FE ",
                "#856DFE ",
                "#FFC880 ",
                "#29b6f6 ",
                "#8bc34a",
                "#fbc02d",
                "#b3e5fc",
                "#ef5350",
                "#4dd0e1",
                "#304ffe",
                "#ff4081",
                "#82b1ff",
                "#6a1b9a",
                "#f57f17",
                "#b71c1c",
                "#a5d6a7",
                "#ffab91",
                "#880e4f",
                "#f8bbd0",
            ],
            segList: [], //渣土车数据下标
            posList: [], //渣土车数据
            switchDataFlag: false, //渣土车数据
            isImmediate: false,
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.porjectType = val.deptId
                this.unbindNum = 0
                this.bindNum = 0
                this.pageNum = 1
                this.current = 1
                this.bindFlag = 1
                this.keyword = ""
                this.machId = ""
                this.machTypeId = ""
                this.tabs = 1
                this.dateRadio = 0
                this.list = []
                this.machTypeList = []
                this.lineArr = []
                this.workStateTypeList = []
                this.Tlist = []
                this.Olist = []
                this.dateList = []
                this.workTimesList = []
                this.idleTimesList = []
                this.randarlist = []
                this.oilDayList = []
                this.oilWear = 0
                this.oilList = []
                this.remainOilList = []
                this.remainOilPercentList = []
                this.timeList = []
                this.workTimes = 0
                this.idleTimes = 0
                this.stopTimes = 0
                this.offlineTimes = 0
                this.oilAdd = 0
                this.avgOilWearNum = 0
                this.avgOilAddNum = 0
                this.workTimeCount = 0
                this.totalCount = 0
                this.imgFlag = false
                this.getList()
                this.getMachNumStatFn()
                if (this.machTypeFlag) {
                    clearInterval(this.machTypeFlag)
                }
                this.machTypeFlag = null
                this.switchFlag = false
            }
        },
        workStateType(val) {
            this.workStateTypeList = []
            this.$refs.tableList.bodyWrapper.scrollTop = 0
            this.Tlist.forEach((i) => {
                if (val == 0 && i.netState == 0 && i.netState != undefined) {
                    this.workStateTypeList.push(i)
                } else {
                    if (val == -1) {
                        this.workStateTypeList.push(i)
                    } else {
                        if (val == i.workState) {
                            this.workStateTypeList.push(i)
                        }
                    }
                }
            })
        },
        oilAddList: {
            handler: function (newVal) {
                if (newVal.length >= 5) {
                    this.oilAddListFlag = true
                } else {
                    this.oilAddListFlag = false
                }
            },
            deep: true,
        },
        tabActiveNameOBD(val, oldVal) {
            switch (val) {
                case "1":
                    this.resOBDList = this.resMachParamList
                    break
                case "2":
                    this.resOBDList = this.resSystemParams
                    break
                case "3":
                    this.resOBDList = this.resEngineMachParams
                    break
                case "4":
                    this.resOBDList = this.resSystemFault
                    break
                case "5":
                    this.resOBDList = this.resAarmIndication
                    break
                case "6":
                    this.resOBDList = []
                    this.resOBDList = this.resEngineFault
                    break
            }
        },
        switchFlag(val, oldVal) {
            if (val) {
                this.machTypeFlag = setInterval(this.getOBDGPSParamList, 5000)
            } else {
                clearInterval(this.machTypeFlag)
            }
        },
        switchDataFlag(val, oldVal) {
            if (val) {
                this.polyline.forEach((v) => {
                    this.map.remove(v)
                })
                this.lineArr = []
                let index = 0
                let indexNum = 0
                for (let i = 0; i < this.posList.length; i++) {
                    for (let j = 0; j < this.segList.length; j++) {
                        if (i == this.segList[j][0]) {
                            i = this.segList[j][1]
                            if (indexNum == 0) {
                                indexNum = 1
                                index = i
                            }
                            for (let k = this.segList[j][0]; k <= this.segList[j][1]; k++) {
                                if (this.lineArr[index] && Array.isArray(this.lineArr[index].path)) {
                                    if (k == this.segList[j][1]) {
                                        this.lineArr[index].path.push(this.posList[k])
                                        this.lineArr[index].path.push(this.posList[k + 1] ? this.posList[k + 1] : this.posList[k])
                                    } else {
                                        this.lineArr[index].path.push(this.posList[k])
                                    }
                                } else {
                                    this.lineArr[index] = {
                                        state: 1,
                                        path: [this.posList[k - 1] ? this.posList[k - 1] : this.posList[k], this.posList[k]],
                                    }
                                }
                            }
                        }
                    }
                    if (indexNum == 1) {
                        indexNum = 0
                        index = i + 1
                    }
                    if (this.lineArr[index] && Array.isArray(this.lineArr[index].path)) {
                        this.lineArr[index].path.push(this.posList[i])
                    } else {
                        this.lineArr[index] = {
                            state: 0,
                            path: [this.posList[i]],
                        }
                    }
                }
                this.lineArr = this.lineArr.filter((v) => v)
                this.getMap(2)
            } else {
                if (this.ifOBDFlag) {
                    this.getOBDGPSLogList(this.machId, this.day)
                } else {
                    this.getMachGps(this.machId, this.day)
                }
            }
        },
    },
    beforeDestroy() {
        if (this.time1) {
            clearInterval(this.time1) // 在Vue实例销毁前，清除定时器
        }
        if (this.machTypeFlag) {
            clearInterval(this.machTypeFlag) // 在Vue实例销毁前，清除我们的定时器
        }
        localStorage.removeItem("oilAddList")
        localStorage.removeItem("oilAddDate")
    },
    methods: {
        /**
         * @description: 按钮点击向上滑动
         * @param {*}
         */
        sliderUp() {},
        /**
         * @description: 按钮点击向下滑动
         * @param {*}
         */
        sliderDown() {},
        getMachNumStatFn() {
            this.unbindNum = ""
            this.bindNum = ""
            let params = {
                keyword: this.keyword,
                deptId: this.porjectType,
            }
            getMachNumStat_v1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.unbindNum = res.data.unbindNum
                        this.bindNum = res.data.bindNum
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        bindFlagFn(val) {
            this.totalCount = ""
            this.machId = ""
            this.list = []
            this.bindFlag = val
            this.pageNum = 1
            this.current = 1
            this.getList()
        },
        tooltipEnterFn(i) {
            this.toolTipFlag = i
        },
        tooltipLeaveFn(i) {
            this.toolTipFlag = -1
        },
        setTabs(type) {
            this.tabs = type
            if (this.tabs == 1) {
                if (!this.switchDataFlag) {
                    if (this.ifOBDFlag) {
                        this.getOBDGPSLogList(this.machId, this.day)
                    } else {
                        this.getMachGps(this.machId, this.day)
                    }
                }
                this.switchDataFlag = false
                this.polyline.forEach((v) => {
                    this.map.remove(v)
                })
                // this.getMachGPSTransportFn(this.machId, this.day);
            } else if (this.tabs == 2) {
                this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                this.getWork(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 3) {
                if (this.dateRadio == 3) {
                    this.dateRadio = 0
                }
                this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                this.getOil(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 4) {
                this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                this.getRadar(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 5) {
                this.getOBDGPSParamList()
            } else if (this.tabs == 6) {
                if (this.dateRadio == 0) {
                    this.dateRadio = 1
                }
                this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                this.getOBDOilDate(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 7) {
                if (this.dateRadio == 0) {
                    this.dateRadio = 1
                }
                if (this.machTypeId == 147) {
                    this.mileList = ["总里程", "总里程1", "总里程2"]
                } else if (this.machTypeId == 146) {
                    this.mileList = ["总里程", "总里程1"]
                } else if (this.machTypeId == 144) {
                    this.mileList = ["总里程", "总里程1"]
                }
                this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                this.getOBDMileDate(this.machId, this.workEenterTime, this.day)
            }
        },
        scrollLoadFn() {
            if (this.list.length < this.totalCount) {
                if (this.pageNum < this.pages) {
                    this.pageNum += 1
                    this.getList()
                }
            }
        },
        searchMach() {
            this.pageNum = 1
            this.pages = 1
            this.list = []
            this.getList()
            this.getMachNumStatFn()
        },
        //获取列表数据
        getList() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                deptId: this.porjectType,
                bindFlag: this.bindFlag,
                keyword: this.keyword,
            }
            getMachDataList_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.totalCount = 0
                        let list = res.data.list
                        if (list.length > 0) {
                            this.initFlag = true
                            this.list = [...this.list, ...list]
                            this.totalCount = res.data.total
                            this.pages = res.data.pages
                            if (this.list.length > 0 && this.pageNum == 1) {
                                if (!this.machId) {
                                    this.machId = this.list[0].machId
                                    this.machTypeId = this.list[0].machType
                                    if (this.list[0].bindFlag == 1) {
                                        if (this.list[0].deviceType && this.list[0].deviceType == 11) {
                                            this.ifOBDFlag = true
                                        } else {
                                            this.ifOBDFlag = false
                                        }
                                    } else if (this.list[0].bindFlag == 0) {
                                        if (this.list[0].deviceType && this.list[0].deviceType == 11) {
                                            this.ifOBDFlag = true
                                        } else {
                                            this.ifOBDFlag = false
                                        }
                                    }
                                    if (!this.switchDataFlag) {
                                        if (this.ifOBDFlag) {
                                            this.getOBDGPSLogList(this.machId, this.day)
                                        } else {
                                            this.getMachGps(this.machId, this.day)
                                        }
                                    }
                                    this.switchDataFlag = false
                                    this.polyline.forEach((v) => {
                                        this.map.remove(v)
                                    })
                                    // this.getMachGPSTransportFn(this.machId, this.day);
                                }
                            }
                        } else {
                            this.tabs = 1
                            this.initFlag = false
                            this.initMap()
                        }
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        initMap() {
            this.map = new AMap.Map("container", {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 13,
            })
            this.imgFlag = false
        },
        //运动轨迹
        getMachGps(id, day) {
            day = initYMD(day)
            let params = {
                machId: id,
                date: day,
            }
            getMachGPSLog_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.lineArr = []
                        this.lineArr[0] = []
                        this.icon = res.data.icon
                        for (var i = 0; i < res.data.gpsList.length; i++) {
                            if (res.data.gpsList[i].lng != 0 && res.data.gpsList[i].lng != 0) {
                                let arr = [res.data.gpsList[i].lng, res.data.gpsList[i].lat]
                                this.lineArr[0].push(arr)
                            }
                        }
                        this.getMap(1)
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        //OBD运动轨迹
        getOBDGPSLogList(id, day) {
            day = initYMD(day)
            let params = {
                machId: id,
                date: day,
            }
            getOBDGPSLogList_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.lineArr = []
                        this.icon = res.data.icon
                        for (var i = 0; i < res.data.gpsList.length; i++) {
                            if (res.data.gpsList[i].lng != 0 && res.data.gpsList[i].lng != 0) {
                                this.lineArr.push([res.data.gpsList[i].lng, res.data.gpsList[i].lat])
                            }
                        }
                        this.getMap(1)
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getMachGPSTransportFn(id, day) {
            day = initYMD(day)
            let params = {
                machId: id,
                date: day,
            }
            getMachGPSTransport(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.lineArr = []
                        this.posList = res.data.posList
                        this.segList = res.data.segList
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getMap(type) {
            var _that = this
            _that.map = new AMap.Map("container", {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 13,
                center: [_that.$store.state.porjectObject.lng || 114.29484, _that.$store.state.porjectObject.lat || 30.592335],
            })
            if (type == 1) {
                if (_that.lineArr.length > 0 && _that.lineArr[0].length > 0) {
                    let polyline
                    _that.lineArr.forEach((v) => {
                        polyline = new AMap.Polyline({
                            path: v,
                            showDir: true,
                            strokeColor: "#1891FF", //线颜色
                            // strokeOpacity: 1,     //线透明度
                            strokeWeight: 4, //线宽
                            // strokeStyle: "solid"  //线样式
                        })
                        polyline.setMap(_that.map)
                        // 缩放地图到合适的视野级别
                        _that.polyline.push(polyline)
                    })
                    _that.markers = new AMap.Marker({
                        map: _that.map,
                        icon: new AMap.Icon({
                            image: _that.icon,
                            size: new AMap.Size(32, 32), //图标大小
                            imageSize: new AMap.Size(32, 32),
                        }),
                        position: [_that.lineArr[0][0].lng, _that.lineArr[0][0].lat],
                        offset: new AMap.Pixel(-13, -30),
                    })
                }
            } else {
                _that.lineArr.forEach((v, i) => {
                    if (v.state == 1) {
                        let polyline
                        polyline = new AMap.Polyline({
                            path: v.path,
                            showDir: true,
                            strokeColor: _that.colorList[i], //线颜色
                            // strokeOpacity: 1,     //线透明度
                            strokeWeight: 4, //线宽
                            // strokeStyle: "solid"  //线样式
                        })
                        polyline.setMap(_that.map)
                        // 缩放地图到合适的视野级别
                        _that.polyline.push(polyline)
                    }
                })
            }
            var mouseTool = new AMap.MouseTool(_that.map)
            _that.map.setFitView()
        },
        prevFn() {
            this.timeFlag = false
            let day = new Date(this.day)
            if ((this.tabs != 3 && this.tabs != 6 && this.tabs != 7) || this.dateRadio != 2) {
                day.setTime(day.getTime() - 24 * 60 * 60 * 1000)
                this.day = initYMD(day)
            } else {
                this.day = initYMD(day)
            }
            if (this.tabs == 1) {
                if (!this.switchDataFlag) {
                    if (this.ifOBDFlag) {
                        this.getOBDGPSLogList(this.machId, this.day)
                    } else {
                        this.getMachGps(this.machId, this.day)
                    }
                }
                this.switchDataFlag = false
                this.polyline.forEach((v) => {
                    this.map.remove(v)
                })
                // this.getMachGPSTransportFn(this.machId, this.day);
            } else if (this.tabs == 2) {
                if (this.dateRadio == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (this.dateRadio == 2) {
                    this.day = getPreMonth(this.day)
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                } else if (this.dateRadio == 3) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getWork(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 3) {
                if (this.dateRadio == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (this.dateRadio == 2) {
                    this.day = getPreMonth(this.day)
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOil(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 4) {
                if (this.dateRadio == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (this.dateRadio == 2) {
                    this.day = getPreMonth(this.day)
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                } else if (this.dateRadio == 3) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getRadar(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 6) {
                if (this.dateRadio == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (this.dateRadio == 2) {
                    this.day = getPreMonth(this.day)
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOBDOilDate(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 7) {
                if (this.dateRadio == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (this.dateRadio == 2) {
                    this.day = getPreMonth(this.day)
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOBDMileDate(this.machId, this.workEenterTime, this.day)
            }
        },
        nextFn() {
            let day = new Date(this.day)
            if ((this.tabs != 3 && this.tabs != 6 && this.tabs != 7) || this.dateRadio != 2) {
                day.setTime(day.getTime() + 24 * 60 * 60 * 1000)
                this.day = initYMD(day)
            } else {
                this.day = initYMD(day)
            }
            if (this.tabs == 1) {
                if (!this.switchDataFlag) {
                    if (this.ifOBDFlag) {
                        this.getOBDGPSLogList(this.machId, this.day)
                    } else {
                        this.getMachGps(this.machId, this.day)
                    }
                }
                this.switchDataFlag = false
                this.polyline.forEach((v) => {
                    this.map.remove(v)
                })
                // this.getMachGPSTransportFn(this.machId, this.day);
            } else if (this.tabs == 2) {
                if (this.dateRadio == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (this.dateRadio == 2) {
                    this.day = getNextMonth(this.day)
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                } else if (this.dateRadio == 3) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getWork(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 3) {
                if (this.dateRadio == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (this.dateRadio == 2) {
                    this.day = getNextMonth(this.day)
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOil(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 4) {
                if (this.dateRadio == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (this.dateRadio == 2) {
                    this.day = getNextMonth(this.day)
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                } else if (this.dateRadio == 3) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getRadar(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 6) {
                if (this.dateRadio == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (this.dateRadio == 2) {
                    this.day = getNextMonth(this.day)
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOBDOilDate(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 7) {
                if (this.dateRadio == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (this.dateRadio == 2) {
                    this.day = getNextMonth(this.day)
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOBDMileDate(this.machId, this.workEenterTime, this.day)
            }
            if (initYMD(this.day) == this.maxDate) {
                this.timeFlag = true
            }
        },
        getMachDetail(item) {
            this.machId = item.machId
            this.machTypeId = item.machType
            if (item.bindFlag == 1) {
                if (item.deviceType && item.deviceType == 11) {
                    if (this.tabs == 4) {
                        this.tabs = 1
                        if (this.dateRadio == 0) {
                            this.dateRadio = 1
                        }
                    } else if (this.tabs == 3) {
                        this.tabs = 6
                        if (this.dateRadio == 0) {
                            this.dateRadio = 1
                        }
                    }
                    // machTypeId : 144-牵引机;146-单轮张力机;147-双轮张力机;
                    if (item.machType == 147) {
                        this.mileList = ["总里程", "总里程1", "总里程2"]
                    } else if (item.machType == 146) {
                        this.mileList = ["总里程", "总里程1"]
                    } else if (item.machType == 144) {
                        this.mileList = ["总里程", "总里程1"]
                    }
                    this.ifOBDFlag = true
                } else {
                    this.ifOBDFlag = false
                    if (this.tabs == 5) {
                        this.tabs = 1
                    } else if (this.tabs == 6) {
                        this.tabs = 3
                    } else if (this.tabs == 7) {
                        this.tabs = 1
                    }
                }
            } else if (item.bindFlag == 0) {
                if (item.deviceType && item.deviceType == 11) {
                    if (this.tabs == 4) {
                        this.tabs = 1
                        if (this.dateRadio == 0) {
                            this.dateRadio = 1
                        }
                    } else if (this.tabs == 3) {
                        this.tabs = 6
                        if (this.dateRadio == 0) {
                            this.dateRadio = 1
                        }
                    }
                    // machTypeId : 144-牵引机;146-单轮张力机;147-双轮张力机;
                    if (item.machType == 147) {
                        this.mileList = ["总里程", "总里程1", "总里程2"]
                    } else if (item.machType == 146) {
                        this.mileList = ["总里程", "总里程1"]
                    } else if (item.machType == 144) {
                        this.mileList = ["总里程", "总里程1"]
                    }
                    this.ifOBDFlag = true
                } else {
                    this.ifOBDFlag = false
                    if (this.tabs == 5) {
                        this.tabs = 1
                    } else if (this.tabs == 6) {
                        this.tabs = 3
                    } else if (this.tabs == 7) {
                        this.tabs = 1
                    }
                }
            }

            // if(item.deviceType == 1){
            //     this.ifOBDFlag = false;
            //     if(this.tabs == 5){
            //         this.tabs = 1;
            //     }else if(this.tabs == 6){
            //         this.tabs = 3;
            //     }else if(this.tabs == 7){
            //         this.tabs = 1;
            //     }
            // }else{
            //     if( this.tabs == 4){
            //         this.tabs = 1;
            //         if(this.dateRadio == 0){
            //             this.dateRadio = 1;
            //         }
            //     }else if(this.tabs == 3){
            //         this.tabs = 6;
            //         if(this.dateRadio == 0){
            //             this.dateRadio = 1;
            //         }
            //     }
            //     // machTypeId : 144-牵引机;146-单轮张力机;147-双轮张力机;
            //     if(item.machType == 147){
            //         this.mileList = ['总里程','总里程1','总里程2']
            //     }else if(item.machType == 146){
            //         this.mileList = ['总里程','总里程1']
            //     }else if(item.machType == 144){
            //         this.mileList =  ['总里程','总里程1']
            //     }
            //     this.ifOBDFlag = true;
            // }
            if (this.tabs == 1) {
                if (!this.switchDataFlag) {
                    if (this.ifOBDFlag) {
                        this.getOBDGPSLogList(this.machId, this.day)
                    } else {
                        this.getMachGps(this.machId, this.day)
                    }
                }
                this.switchDataFlag = false
                this.polyline.forEach((v) => {
                    this.map.remove(v)
                })
                // this.getMachGPSTransportFn(this.machId, this.day);
            } else if (this.tabs == 2) {
                this.getWork(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 3) {
                this.getOil(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 4) {
                this.getRadar(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 5) {
                this.getOBDGPSParamList()
            } else if (this.tabs == 6) {
                this.getOBDOilDate(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 7) {
                this.getOBDMileDate(this.machId, this.workEenterTime, this.day)
            }
        },
        getGpsDate(index) {
            if (initYMD(this.maxDate) == initYMD(this.day)) {
                this.timeFlag = true
            } else {
                this.timeFlag = false
            }
            if (!this.switchDataFlag) {
                if (this.ifOBDFlag) {
                    this.getOBDGPSLogList(this.machId, this.day)
                } else {
                    this.getMachGps(this.machId, this.day)
                }
            }
            this.switchDataFlag = false
            this.polyline.forEach((v) => {
                this.map.remove(v)
            })
            // this.getMachGPSTransportFn(this.machId, this.day);
        },
        //设备工时
        getWork(id, day, day1) {
            let startTime, endTime
            startTime = formatInItDate(day)
            endTime = formatInItDate(day1)
            let params = {}
            if (this.dateRadio == 0) {
                this.workStateType = 0
                this.tabActiveName = "-1"
                params = {
                    machId: id,
                    date: endTime,
                }
            } else if (this.dateRadio == 2) {
                params = {
                    machId: id,
                    month: endTime.substring(0, 7),
                }
            } else {
                params = {
                    machId: id,
                    startDate: startTime,
                    endDate: endTime,
                }
                if (this.dateRadio == 3) {
                    if (endTime == startTime) {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "自定义时间不能选择同一天",
                        })
                        return
                    }
                    if (Date.parse(day) > Date.parse(day1)) {
                        this.$Modal.warning({
                            title: "提示",
                            content: "开始时间不能大于结束时间",
                        })
                        return
                        ;(this.workTimes + this.idleTimes + this.stopTimes + this.offlineTimes).toFixed(2)
                    }
                }
            }
            this.dateList = []
            this.workTimesList = []
            this.idleTimesList = []
            this.Tlist = []
            getMachWorkData_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.workTimes = res.data.workTimes
                        this.idleTimes = res.data.idleTimes
                        this.offlineTimes = res.data.offlineTimes
                        let dateList = res.data.dateList || []
                        if (this.dateRadio == 0) {
                            this.stopTimes = res.data.stopTimes
                            this.workTimeCount = (this.workTimes + this.idleTimes + this.stopTimes + this.offlineTimes).toFixed(2)
                            this.Tlist = res.data.timeList || []
                            let time = new Date(endTime.substring(0, 10) + "00:00:00").getTime()
                            this.Tlist.forEach((i) => {
                                if (time > new Date(i.startTime).getTime()) {
                                    i.startTime = endTime.substring(0, 10) + "00:00:00"
                                }
                                i["date"] = i.startTime.substring(10, 19) + " -- " + i.endTime.substring(10, 19)
                                i["duration"] = timeStamp(
                                    (parseInt(new Date(i.endTime.replace(/-/g, "/")).getTime()) -
                                        parseInt(parseInt(new Date(i.startTime.replace(/-/g, "/")).getTime()))) /
                                        1000
                                )
                            })
                            this.workStateTypeList = this.Tlist
                            this.workDayCountFn()
                        } else {
                            this.workTimeCount = (this.workTimes + this.idleTimes).toFixed(2)
                            dateList.forEach((i) => {
                                this.dateList.push(i.date)
                                this.workTimesList.push(i.workTimes)
                                this.idleTimesList.push(i.idleTimes)
                            })
                            this.worklineFn()
                        }
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        dateRadioFn(value) {
            if (this.tabs == 2) {
                if (value == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (value == 3) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getWork(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 3) {
                if (value == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (value == 2) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOil(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 4) {
                if (value == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (value == 3) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getRadar(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 6) {
                if (value == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (value == 2) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                } else if (value == 3) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOBDOilDate(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 7) {
                if (value == 1) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                } else if (value == 2) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                } else if (value == 3) {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOBDMileDate(this.machId, this.workEenterTime, this.day)
            }
        },
        getworkStartTime(index) {
            if (this.tabs == 2) {
                if (this.dateRadio == 3) {
                    this.workEenterTime = index
                    this.getWork(this.machId, this.workEenterTime, this.day)
                }
            } else if (this.tabs == 3) {
                this.workEenterTime = index
                this.getOil(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 4) {
                this.workEenterTime = index
                this.getRadar(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 6) {
                this.workEenterTime = index
                this.getOBDOilDate(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 7) {
                this.workEenterTime = index
                this.getOBDMileDate(this.machId, this.workEenterTime, this.day)
            }
        },
        // 设备OBD参数
        getOBDGPSParamList() {
            let params = {
                machId: this.machId,
            }
            this.resEngineFault = []
            this.currentFaultList = []
            this.historyFaultList = []
            // 清除 双轮张力机设备参数 value值
            this.doubleMachParams.forEach((v) => (v["value"] = "—"))
            // 清除 单轮张力机设备参数 value值
            this.singleMachParams.forEach((v) => (v["value"] = "—"))
            // 清除 牵引机设备参数 value值
            this.tractorMachParams.forEach((v) => (v["value"] = "—"))
            // 清除 单轮张力机系统参数 value值
            this.singleSystemParams.forEach((v) => (v["value"] = "—"))
            // 清除 双轮张力机系统参数 value值
            this.doubleSystemParams.forEach((v) => (v["value"] = "—"))
            // 清除 牵引机系统参数 value值
            this.tractorSystemParams.forEach((v) => (v["value"] = "—"))
            // 清除 柴油机参数 value值
            this.engineMachParams.forEach((v) => (v["value"] = "—"))
            // 清除 系统故障 value值
            this.systemFault.forEach((v) => (v["value"] = "—"))
            // 清除 牵引机系统故障 value值
            this.tractorSystemFault.forEach((v) => (v["value"] = "—"))
            // 清除 报警提示 value值
            this.alarmIndication.forEach((v) => (v["value"] = "—"))
            getOBDGPSParamList_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        /**
                         * machTypeId : 144-牵引机;146-单轮张力机;147-双轮张力机;
                         *
                         */
                        let list = res.data.frameList
                        let dir_pos
                        let dir_pos1
                        for (let i = 0; i < list.length; i++) {
                            for (let k = 0; k < list[i].frameDataItemList.length; k++) {
                                if (this.machTypeId == 147) {
                                    if (res.data.workState != 0) {
                                        if (res.data.workState == 1) {
                                            for (let j = 0; j < this.doubleMachParams.length; j++) {
                                                if (
                                                    list[i].frameDataItemList[k].code == this.doubleMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "total_length1"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.doubleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.doubleMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.doubleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                                if (
                                                    list[i].frameDataItemList[k].code == this.doubleMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "total_length2"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.doubleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.doubleMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.doubleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                                if (
                                                    list[i].frameDataItemList[k].code == this.doubleMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "length1"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.doubleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.doubleMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.doubleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                                if (
                                                    list[i].frameDataItemList[k].code == this.doubleMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "length2"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.doubleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.doubleMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.doubleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                        } else {
                                            for (let j = 0; j < this.doubleMachParams.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.doubleMachParams[j].code) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.doubleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.doubleMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.doubleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                            for (let j = 0; j < this.doubleSystemParams.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.doubleSystemParams[j].code) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.doubleSystemParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.doubleSystemParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.doubleSystemParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                            for (let j = 0; j < this.systemFault.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.systemFault[j].code) {
                                                    this.systemFault[j]["value"] = list[i].frameDataItemList[k].value
                                                }
                                            }
                                        }
                                    }
                                } else if (this.machTypeId == 146) {
                                    if (res.data.workState != 0) {
                                        if (res.data.workState == 1) {
                                            for (let j = 0; j < this.singleMachParams.length; j++) {
                                                if (
                                                    list[i].frameDataItemList[k].code == this.singleMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "total_length1"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.singleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.singleMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.singleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                                if (
                                                    list[i].frameDataItemList[k].code == this.singleMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "length1"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.singleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.singleMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.singleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                        } else {
                                            for (let j = 0; j < this.singleMachParams.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.singleMachParams[j].code) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.singleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.singleMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.singleMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                            for (let j = 0; j < this.singleSystemParams.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.singleSystemParams[j].code) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.singleSystemParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.singleSystemParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.singleSystemParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                            for (let j = 0; j < this.systemFault.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.systemFault[j].code) {
                                                    this.systemFault[j]["value"] = list[i].frameDataItemList[k].value
                                                }
                                            }
                                        }
                                    }
                                } else if (this.machTypeId == 144) {
                                    if (res.data.workState != 0) {
                                        if (res.data.workState == 1) {
                                            for (let j = 0; j < this.tractorMachParams.length; j++) {
                                                if (
                                                    list[i].frameDataItemList[k].code == this.tractorMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "total_length1"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.tractorMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.tractorMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.tractorMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                                if (
                                                    list[i].frameDataItemList[k].code == this.tractorMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "length1"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.tractorMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.tractorMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.tractorMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                        } else {
                                            for (let j = 0; j < this.tractorMachParams.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.tractorMachParams[j].code) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.tractorMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.tractorMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.tractorMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                            if (list[i].frameDataItemList[k].code == "dir_pos") {
                                                dir_pos = list[i].frameDataItemList[k].value
                                            }
                                            if (list[i].frameDataItemList[k].code == "dir_pos1") {
                                                dir_pos1 = list[i].frameDataItemList[k].value
                                            }

                                            for (let j = 0; j < this.tractorSystemParams.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.tractorSystemParams[j].code) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.tractorSystemParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.tractorSystemParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.tractorSystemParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                            for (let j = 0; j < this.tractorSystemFault.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.tractorSystemFault[j].code) {
                                                    this.tractorSystemFault[j]["value"] = list[i].frameDataItemList[k].value
                                                }
                                            }
                                        }
                                    }
                                } else {
                                    if (res.data.workState != 0) {
                                        if (res.data.workState == 1) {
                                            for (let j = 0; j < this.allMachParams.length; j++) {
                                                if (
                                                    list[i].frameDataItemList[k].code == this.allMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "total_length1"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.allMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.allMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.allMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                                if (
                                                    list[i].frameDataItemList[k].code == this.allMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "total_length2"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.allMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.allMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.allMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                                if (
                                                    list[i].frameDataItemList[k].code == this.allMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "length1"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.allMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.allMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.allMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                                if (
                                                    list[i].frameDataItemList[k].code == this.allMachParams[j].code &&
                                                    list[i].frameDataItemList[k].code == "length2"
                                                ) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.allMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.allMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.allMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                        } else {
                                            for (let j = 0; j < this.allMachParams.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.allMachParams[j].code) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.allMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.allMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.allMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                            for (let j = 0; j < this.allSystemParams.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.allSystemParams[j].code) {
                                                    if (list[i].frameDataItemList[k].unit) {
                                                        this.allSystemParams[j]["value"] = list[i].frameDataItemList[k].value
                                                        this.allSystemParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                    } else {
                                                        this.allSystemParams[j]["value"] = list[i].frameDataItemList[k].value
                                                    }
                                                }
                                            }
                                            for (let j = 0; j < this.allSystemFault.length; j++) {
                                                if (list[i].frameDataItemList[k].code == this.allSystemFault[j].code) {
                                                    this.allSystemFault[j]["value"] = list[i].frameDataItemList[k].value
                                                }
                                            }
                                        }
                                    }
                                }
                                if (res.data.workState != 0) {
                                    if (res.data.workState == 1) {
                                        for (let j = 0; j < this.engineMachParams.length; j++) {
                                            if (
                                                list[i].frameDataItemList[k].code == this.engineMachParams[j].code &&
                                                this.engineMachParams[j].code == "total_engine_hours"
                                            ) {
                                                this.engineMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                this.engineMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                            } else if (
                                                list[i].frameDataItemList[k].code == this.engineMachParams[j].code &&
                                                this.engineMachParams[j].code == "total_fuel_consumption"
                                            ) {
                                                this.engineMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                this.engineMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                            }
                                        }
                                    } else {
                                        for (let j = 0; j < this.engineMachParams.length; j++) {
                                            if (list[i].frameDataItemList[k].code == this.engineMachParams[j].code) {
                                                this.engineMachParams[j]["unit"] = list[i].frameDataItemList[k].unit
                                                this.engineMachParams[j]["value"] = list[i].frameDataItemList[k].value
                                            }
                                        }
                                        for (let j = 0; j < this.alarmIndication.length; j++) {
                                            if (list[i].frameDataItemList[k].code == this.alarmIndication[j].code) {
                                                this.alarmIndication[j]["value"] = list[i].frameDataItemList[k].value
                                            }
                                        }
                                        if (list[i].frameId == 0x18feca00) {
                                            if (list[i].frameDataItemList[k].code == "dtc") {
                                                let obj = list[i].frameDataItemList[k]
                                                this.currentFaultList.push(obj)
                                            }
                                        } else if (list[i].frameId == 0x18ebff00) {
                                            if (list[i].frameDataItemList[k].code == "dtc") {
                                                let obj = list[i].frameDataItemList[k]
                                                this.historyFaultList.push(obj)
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        if (res.data.workState != 0) {
                            for (let i = 0; i < this.currentFaultList.length; i++) {
                                const obj = this.currentFaultList[i]
                                if (obj.value.cm == 0 && obj.value.fmi == 0 && obj.value.oc == 0 && obj.value.spn == 0) {
                                    this.currentFaultList.splice(i, 1)
                                }
                            }
                            for (let i = 0; i < this.historyFaultList.length; i++) {
                                const obj = this.historyFaultList[i]
                                if (obj.value.cm == 0 && obj.value.fmi == 0 && obj.value.oc == 0 && obj.value.spn == 0) {
                                    this.historyFaultList.splice(i, 1)
                                }
                            }
                        }
                        this.resEngineFault = [...this.currentFaultList, ...this.historyFaultList]
                        if (this.machTypeId == 147 && list.length > 0) {
                            this.resMachParamList = this.doubleMachParams
                            this.resSystemParams = this.doubleSystemParams
                            this.resSystemFault = this.systemFault
                        } else if (this.machTypeId == 146 && list.length > 0) {
                            this.resMachParamList = this.singleMachParams
                            this.resSystemParams = this.singleSystemParams
                            this.resSystemFault = this.systemFault
                        } else if (this.machTypeId == 144 && list.length > 0) {
                            dir_pos = dir_pos || 0
                            dir_pos1 = dir_pos1 || 0
                            if (res.data.workState != 0 && res.data.workState != 1) {
                                this.tractorMachParams.forEach((v) => {
                                    if (v.code == "dirObj") {
                                        v["value"] = String(dir_pos) + "-" + String(dir_pos1)
                                    }
                                })
                            }
                            this.resMachParamList = this.tractorMachParams
                            this.resSystemParams = this.tractorSystemParams
                            this.resSystemFault = this.tractorSystemFault
                        } else {
                            if (list.length > 0) {
                                dir_pos = dir_pos || 0
                                dir_pos1 = dir_pos1 || 0
                                if (res.data.workState != 0 && res.data.workState != 1) {
                                    this.allMachParams.forEach((v) => {
                                        if (v.code == "dirObj") {
                                            v["value"] = String(dir_pos) + "-" + String(dir_pos1)
                                        }
                                    })
                                }
                            } else {
                                if (res.data.workState != 0 && res.data.workState != 1) {
                                    this.allMachParams.forEach((v) => {
                                        if (v.code == "dirObj") {
                                            v["value"] = "—"
                                        }
                                    })
                                }
                            }
                            this.resMachParamList = this.allMachParams
                            this.resSystemParams = this.allSystemParams
                            this.resSystemFault = this.allSystemFault
                        }
                        this.resEngineMachParams = this.engineMachParams
                        this.resAarmIndication = this.alarmIndication
                        switch (this.tabActiveNameOBD) {
                            case "1":
                                this.resOBDList = this.resMachParamList
                                break
                            case "2":
                                this.resOBDList = this.resSystemParams
                                break
                            case "3":
                                this.resOBDList = this.resEngineMachParams
                                break
                            case "4":
                                this.resOBDList = this.resSystemFault
                                break
                            case "5":
                                this.resOBDList = this.resAarmIndication
                                break
                            case "6":
                                this.resOBDList = []
                                this.resOBDList = this.resEngineFault
                                break
                        }
                        this.OBDTime = res.data.time || initYMD(new Date())
                        this.OBDWorkState = res.data.workState
                        this.batteryPower = res.data.batteryPower || 0
                        let resSystemFaultNum = 0
                        let resAarmIndicationNum = 0
                        let resEngineFaultNum = this.resEngineFault.length || 0
                        for (let i = 0; i < this.resSystemFault.length; i++) {
                            const e = this.resSystemFault[i]
                            if (e.value == 1) {
                                resSystemFaultNum += e.value
                            }
                        }
                        for (let i = 0; i < this.resAarmIndication.length; i++) {
                            const e = this.resAarmIndication[i]
                            if (e.value == 1) {
                                resAarmIndicationNum += e.value
                            }
                        }

                        this.machOBDList[3].num = resSystemFaultNum
                        this.machOBDList[4].num = resAarmIndicationNum
                        this.machOBDList[5].num = resEngineFaultNum
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        // 添加设备标定加油量一列
        oilAddFn() {
            // 获取设备标定加油量按钮
            let time = initHMS(new Date())
            let obj = {
                time,
                oilAdd: "",
            }
            this.oilAddList.push(obj)
        },
        getMachOilAddBtn() {
            this.oilAddFlag = true
            this.isOilAddFlag = false
            this.isOffFlag = false
            this.oilAddListFlag = false
            this.cancelFlag = false
            this.oilAddDateFlag = true
            let day = initYMD(this.day)
            let maxDay = initYMD(new Date())
            if (day == maxDay) {
                this.OBDTimeFlag = true
            } else {
                this.OBDTimeFlag = false
            }
            this.oilAddDate = initYMD(this.day)
            this.getMachOilAddFn()
        },
        // 获取设备标定加油量详情
        getMachOilAddFn() {
            let params = {
                machId: this.machId,
                date: initYMD(this.oilAddDate),
            }
            getMachOilAdd_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        res.data.list.forEach((v) => {
                            v.time = initHMS(v.time)
                        })
                        this.oilAddList = res.data.list
                        this.cancelFlag = true
                        localStorage.setItem("oilAddList", JSON.stringify(this.oilAddList))
                        localStorage.setItem("oilAddDate", JSON.stringify(this.oilAddDate))
                    } else {
                        this.$Message.warning(res.msg)
                        this.oilAddDate = initYMD(JSON.parse(localStorage.getItem("oilAddDate")))
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        oilAddRrevFn() {
            this.OBDTimeFlag = false
            let oilAddDate = new Date(this.oilAddDate)
            oilAddDate.setTime(oilAddDate.getTime() - 24 * 60 * 60 * 1000)
            this.oilAddDate = initYMD(oilAddDate)
            this.cancelFlag = true
            this.commonOliAddFn()
        },
        oilAddNextFn() {
            let oilAddDate = new Date(this.oilAddDate)
            oilAddDate.setTime(oilAddDate.getTime() + 24 * 60 * 60 * 1000)
            this.oilAddDate = initYMD(oilAddDate)
            this.cancelFlag = true
            this.commonOliAddFn()
            if (initYMD(this.maxDate) == initYMD(this.oilAddDate)) {
                this.OBDTimeFlag = true
            } else {
                this.OBDTimeFlag = false
            }
        },
        oilAddDateFn() {
            this.cancelFlag = true
            if (initYMD(this.maxDate) == initYMD(this.oilAddDate)) {
                this.OBDTimeFlag = true
            } else {
                this.OBDTimeFlag = false
            }
            this.commonOliAddFn()
        },
        // 公共处理函数
        commonOliAddFn() {
            let flag = true
            this.oilAddList.forEach((v) => {
                if (!v.oilAdd && v.oilAdd == 0) {
                    flag = false
                }
            })
            if (flag) {
                let oilAddList = JSON.parse(localStorage.getItem("oilAddList"))
                if (oilAddList.length == this.oilAddList.length) {
                    let oilAddListFlag = true
                    oilAddList.forEach((v, i) => {
                        if (v.time != this.oilAddList[i].time || v.oilAdd != this.oilAddList[i].oilAdd) {
                            oilAddListFlag = false
                        }
                    })
                    if (oilAddListFlag) {
                        localStorage.setItem("oilAddDate", JSON.stringify(this.oilAddDate))
                        this.getMachOilAddFn()
                        this.oilAddDateFlag = true
                        this.isOffFlag = false
                        if (this.cancelFlag) {
                            this.oilAddFlag = true
                        } else {
                            this.oilAddFlag = false
                        }
                        this.isOilAddFlag = false
                    } else {
                        this.isOilAddFlag = true
                        this.oilAddDateFlag = false
                        this.isOffFlag = true
                        this.cancelFlag = false
                    }
                } else {
                    this.isOilAddFlag = true
                    this.oilAddDateFlag = false
                    this.cancelFlag = false
                    this.isOffFlag = true
                }
            } else {
                this.$Modal.warning({
                    title: "提示",
                    content: "标定量最低大于0",
                })
                this.oilAddDate = initYMD(JSON.parse(localStorage.getItem("oilAddDate")))
                this.oilAddDateFlag = false
                this.isOilAddFlag = false
                this.isOffFlag = false
                this.oilAddFlag = true
            }
        },
        removeOilBtn(index) {
            this.oilAddList.forEach((v, i) => {
                if (i == index) {
                    this.oilAddList.splice(index, 1)
                }
            })
        },
        isOilAddFn() {
            this.isOilAddFlag = false
            let oilAddDate
            if (!this.cancelFlag) {
                oilAddDate = initYMD(JSON.parse(localStorage.getItem("oilAddDate")))
            }
            this.setOilAddFn(oilAddDate, 2)
        },
        setOilAddFn(time, type) {
            let oilAddDate = time ? initYMD(time) : initYMD(this.oilAddDate)
            if (type == 1) {
                this.isOffFlag = false
            }
            // if(this.oilAddDateFlag){
            //     oilAddDate = initYMD(this.oilAddDate);
            // }else{
            //     oilAddDate = initYMD(JSON.parse(localStorage.getItem('oilAddDate')));
            // }
            let flag = true
            let numFlag = true
            let oilAddList = []
            this.oilAddList.forEach((v) => {
                if (v.oilAdd && v.oilAdd > 0) {
                    if (v.oilAdd > 10000) {
                        numFlag = false
                    } else {
                        let obj = {
                            time: oilAddDate + " " + v.time,
                            oilAdd: v.oilAdd,
                        }
                        oilAddList.push(obj)
                    }
                } else {
                    flag = false
                }
            })
            if (numFlag) {
                if (flag) {
                    let params = {
                        machId: this.machId,
                        date: oilAddDate,
                        oilAddList,
                    }
                    setOilAdd_V1(params)
                        .then((res) => {
                            if (res.code == 200) {
                                if (!this.isOilAddFlag) {
                                    this.oilAddFlag = true
                                    this.getMachOilAddFn()
                                }
                                if (!this.isOffFlag) {
                                    this.oilAddFlag = false
                                    if (this.dateRadio == 1) {
                                        this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                                    } else if (this.dateRadio == 3) {
                                        this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                                    }
                                    this.getOil(this.machId, this.workEenterTime, this.day)
                                } else {
                                    if (this.dateRadio == 1) {
                                        this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 518400000))
                                    } else if (this.dateRadio == 3) {
                                        this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                                    }
                                    this.getOil(this.machId, this.workEenterTime, this.day)
                                    this.$Message.success("加油量标定成功")
                                }
                            } else {
                                this.$Message.warning(res.msg)
                            }
                        })
                        .catch((error) => {
                            console.log(error)
                        })
                } else {
                    this.$Modal.warning({
                        title: "提示",
                        content: "标定量最低大于0",
                    })
                }
            } else {
                this.$Modal.warning({
                    title: "提示",
                    content: "标定量最大不能大于10000",
                })
            }
        },
        getworkTime(index) {
            if (this.tabs == 2) {
                if (this.dateRadio != 3) {
                    this.workEenterTime = initYMD(new Date(this.day.getTime() - 518400000))
                }
                this.getWork(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 3) {
                if (this.dateRadio != 2) {
                    this.workEenterTime = initYMD(new Date(this.day.getTime() - 518400000))
                } else {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOil(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 4) {
                if (this.dateRadio != 3) {
                    this.workEenterTime = initYMD(new Date(this.day.getTime() - 518400000))
                }
                this.getRadar(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 6) {
                if (this.dateRadio != 2) {
                    this.workEenterTime = initYMD(new Date(this.day.getTime() - 518400000))
                } else {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOBDOilDate(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 7) {
                if (this.dateRadio != 2) {
                    this.workEenterTime = initYMD(new Date(this.day.getTime() - 518400000))
                } else {
                    this.workEenterTime = initYMD(new Date(new Date(this.day).getTime() - 2505600000))
                }
                this.getOBDMileDate(this.machId, this.workEenterTime, this.day)
            }
        },
        getWorkStateType(item) {
            this.workStateType = item
        },
        workDayCountFn() {
            let workDayCanvas = this.$echarts.init(document.getElementById("workDayCanvas"))
            workDayCanvas.setOption({
                tooltip: {
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                title: {
                    text: this.workTimeCount,
                    left: "center",
                    top: "35%",
                    textStyle: {
                        color: "#434242",
                        fontSize: 20,
                        align: "center",
                    },
                },
                graphic: {
                    type: "text",
                    left: "center",
                    top: "55%",
                    style: {
                        text: "总时长",
                        textAlign: "center",
                        fill: "#333",
                        fontSize: 12,
                        fontWeight: 400,
                    },
                },
                series: [
                    {
                        name: "时长",
                        type: "pie",
                        radius: ["50%", "60%"],
                        avoidLabelOverlap: false,
                        labelLine: {
                            show: false,
                        },
                        label: {
                            normal: {
                                position: "inner",
                                show: false,
                            },
                        },
                        data: [
                            {
                                value: this.workTimes,
                                name: "工作时长",
                                itemStyle: {
                                    normal: {
                                        color: "#28C81E",
                                    },
                                },
                            },
                            {
                                value: this.idleTimes,
                                name: "怠机时长",
                                itemStyle: {
                                    normal: {
                                        color: "#FF410A",
                                    },
                                },
                            },
                            {
                                value: this.stopTimes,
                                name: "停机时长",
                                itemStyle: {
                                    normal: {
                                        color: "#619CEC",
                                    },
                                },
                            },
                            {
                                value: this.offlineTimes,
                                name: "离线时长",
                                itemStyle: {
                                    normal: {
                                        color: "#999999",
                                    },
                                },
                            },
                        ],
                    },
                ],
            })
        },
        worklineFn() {
            let workline = this.$echarts.init(document.getElementById("workline"))
            let week = []
            this.dateList.forEach((v) => {
                let obj = initMD(v)
                week.push(obj)
            })
            workline.setOption({
                tooltip: {
                    //触发类型：坐标轴触发
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "rgba(253, 97, 148, 1)",
                        },
                    },
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                grid: {
                    left: "4%",
                    right: "5%",
                    containLabel: true,
                },
                legend: {
                    bottom: "1%",
                    data: ["日均工作时长", "日均怠机时长"],
                },
                color: ["#25FBFE", "#FD6194"],
                xAxis: [
                    {
                        name: "日期",
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#BFBFBF",
                                type: "dashed",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        boundaryGap: true,
                        data: week,
                    },
                ],
                yAxis: [
                    {
                        name: "时间（h)",
                        type: "value",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "日均工作时长",
                        smooth: true, //true 为平滑曲线，false为直线
                        type: "line",
                        areaStyle: {},
                        data: this.workTimesList,
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: "#2AFAFE",
                                lineStyle: {
                                    // 系列级个性化折线样式
                                    width: 4,
                                    type: "solid",
                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                    // 右下左上
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#2AFAFE",
                                        },
                                        {
                                            offset: 1,
                                            color: "#2AFAFE",
                                        },
                                    ]), // 线条渐变色
                                },
                            },
                        }, // 线条样式
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0,
                                        color: "#2AFAFE",
                                    },
                                    {
                                        offset: 1,
                                        color: "#fff",
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        name: "日均怠机时长",
                        smooth: true, //true 为平滑曲线，false为直线
                        type: "line",
                        areaStyle: {},
                        data: this.idleTimesList,
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: "#FD6194",
                                lineStyle: {
                                    // 系列级个性化折线样式
                                    width: 4,
                                    type: "solid",
                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                    // 右下左上
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#FD6194",
                                        },
                                        {
                                            offset: 1,
                                            color: "#FD6194",
                                        },
                                    ]), // 线条渐变色
                                },
                            },
                        }, // 线条样式
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0,
                                        color: "#FD6194",
                                    },
                                    {
                                        offset: 1,
                                        color: "#fff",
                                    },
                                ]),
                            },
                        },
                    },
                ],
            })
        },
        // 设备指数
        getRadar(id, day, day1) {
            let startTime, endTime
            startTime = formatInItDate(day)
            endTime = formatInItDate(day1)
            let params = {}
            if (this.dateRadio == 0) {
                params = {
                    machId: id,
                    date: endTime,
                }
            } else if (this.dateRadio == 2) {
                params = {
                    machId: id,
                    month: endTime.substring(0, 7),
                }
            } else {
                params = {
                    machId: id,
                    startDate: startTime,
                    endDate: endTime,
                }
            }
            getMachRadarData_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.randarlist = []
                        this.randarlist.push(res.data.efficExp)
                        this.randarlist.push(res.data.stabExp)
                        this.randarlist.push(res.data.oilExp)
                        this.randarlist.push(res.data.safeExp)
                        this.randarlist.push(res.data.strengthExp)
                        this.maxcnt = Math.max(...this.randarlist)
                        this.generalExp = res.data.generalExp || 0
                        if (this.maxcnt == 0) {
                            this.maxcnt = 10
                        }
                        this.radarFn()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        radarFn() {
            let radarObj = this.$echarts.init(document.getElementById("radar"))
            radarObj.setOption({
                tooltip: {
                    //触发类型：坐标轴触发
                    formatter: this.radarMapDTOTipFn,
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                radar: [
                    {
                        indicator: [
                            { text: "效率指数：" + " " + this.randarlist[0], max: this.maxcnt },
                            { text: "稳定指数：" + " " + this.randarlist[1], max: this.maxcnt },
                            { text: "油耗指数：" + " " + this.randarlist[2], max: this.maxcnt },
                            { text: "安全指数：" + " " + this.randarlist[3], max: this.maxcnt },
                            { text: "强度指数：" + " " + this.randarlist[4], max: this.maxcnt },
                        ],
                        center: ["50%", "50%"],
                        radius: 120,
                        startAngle: 90,
                        splitNumber: 4,
                        shape: "circle",
                        name: {
                            formatter: "{value}",
                            textStyle: {
                                color: "rgba(83, 84, 85, 1)",
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.5)",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.5)",
                            },
                        },
                    },
                ],
                calculable: true,
                series: [
                    {
                        name: "综合效率指数",
                        type: "radar",
                        tooltip: {
                            trigger: "item",
                        },
                        areaStyle: {
                            normal: {
                                color: "rgba(73, 1, 236, 0.5)",
                            },
                        },
                        emphasis: {
                            lineStyle: {
                                width: 4,
                            },
                        },
                        data: [
                            {
                                value: this.randarlist,
                                itemStyle: {
                                    normal: {
                                        color: "rgba(73, 1, 236, 0.5)",
                                    },
                                },
                            },
                        ],
                    },
                ],
            })
        },
        // 设备油耗
        getOil(id, day, day1) {
            let startTime, endTime
            startTime = formatInItDate(day)
            endTime = formatInItDate(day1)

            let params = {}
            if (this.dateRadio == 0) {
                params = {
                    machId: id,
                    date: endTime,
                }
            } else if (this.dateRadio == 2) {
                params = {
                    machId: id,
                    month: endTime.substring(0, 7),
                }
            } else {
                params = {
                    machId: id,
                    startDate: startTime,
                    endDate: endTime,
                }
            }
            getMachOilData_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.oilDayList = []
                        let oilWearArr = []
                        let oilAddArr = []
                        let oilAddMax = 0
                        let oilWearMax = 0
                        this.remainOilList = []
                        this.remainOilPercentList = []
                        this.timeList = []
                        this.oilList = []
                        this.Olist = []
                        this.oilWear = res.data.oilWear.toFixed(2)
                        this.oilAdd = res.data.oilAdd.toFixed(2)
                        this.setOilAdd = res.data.setOilAdd.toFixed(2)
                        this.avgOilAddNum = res.data.avgOilAdd.toFixed(2)
                        this.avgOilWearNum = res.data.avgOilWear.toFixed(2)
                        this.oilList = res.data.hourOilList || []
                        if (res.data.remainOilList.length > 0) {
                            res.data.remainOilList.forEach((i) => {
                                if (this.dateRadio == 0) {
                                    let obj = {
                                        name: new Date(i.time).getTime(),
                                        value: [new Date(i.time).getTime(), i.remainOil, i.remainOilPercent],
                                    }
                                    this.remainOilList.push(obj)
                                } else {
                                    this.remainOilList.push(i.remainOil)
                                    this.remainOilPercentList.push(i.remainOilPercent)
                                }
                                this.timeList.push(initYMDHM(i.time))
                            })
                        }
                        if (this.oilList.length > 0) {
                            this.oilList.forEach((v) => {
                                v["date"] = v.startTime.substring(10, 19) + " -- " + v.endTime.substring(10, 19)
                                v["times"] = (new Date(v.endTime).getTime() - new Date(v.startTime).getTime()) / 1000
                                oilWearArr.push(v.oilWear)
                                oilAddArr.push(v.oilAdd)
                                this.Olist.push(v)
                            })
                            oilAddMax = Math.max(...oilAddArr)
                            oilWearMax = Math.max(...oilWearArr)
                            this.oilMax = numMaxFn(oilAddMax, oilWearMax)
                        }
                        if (res.data.dayOilList.length > 0) {
                            res.data.dayOilList.forEach((v) => {
                                let obj = {
                                    date: initMD(v.date),
                                    oilAdd: v.oilAdd,
                                    oilWear: v.oilWear,
                                }
                                this.oilDayList.push(obj)
                            })
                        }
                        if (this.dateRadio != 0) {
                            this.oilWearFn()
                        }
                        this.remainOilFn()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        // OBD设备油耗
        getOBDOilDate(id, day, day1) {
            let startTime, endTime
            startTime = formatInItDate(day)
            endTime = formatInItDate(day1)

            let params = {}
            if (this.dateRadio == 0) {
                params = {
                    machId: id,
                    date: endTime,
                }
            } else if (this.dateRadio == 2) {
                params = {
                    machId: id,
                    month: endTime.substring(0, 7),
                }
            } else {
                params = {
                    machId: id,
                    startDate: startTime,
                    endDate: endTime,
                }
            }
            getOBDOilDate_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.timeList = []
                        this.oilWearList = []
                        this.totalOilWear = res.data.totalOilWear
                        this.avgOilWear = res.data.avgOilWear
                        res.data.oilWearList.forEach((v) => {
                            this.timeList.push(v.date)
                            this.oilWearList.push(v.oilWear)
                        })
                        this.avgOilWearLineFn()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        // OBD设备里程
        getOBDMileDate(id, day, day1) {
            let startTime, endTime
            startTime = formatInItDate(day)
            endTime = formatInItDate(day1)
            let params = {}
            if (this.dateRadio == 0) {
                params = {
                    machId: id,
                    date: endTime,
                }
            } else if (this.dateRadio == 2) {
                params = {
                    machId: id,
                    month: endTime.substring(0, 7),
                }
            } else {
                params = {
                    machId: id,
                    startDate: startTime,
                    endDate: endTime,
                }
            }
            getOBDMileDate_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.totalMile = res.data.totalMile
                        this.mileEffic = res.data.mileEffic
                        this.totalMile1 = res.data.totalMile1
                        this.mileEffic1 = res.data.mileEffic1
                        this.totalMile2 = res.data.totalMile2
                        this.mileEffic2 = res.data.mileEffic2
                        this.totalMileList = res.data.mileList
                        let time = []
                        let mile = []
                        let mile1 = []
                        let mile2 = []
                        let series = []
                        if (this.totalMileList.length > 0) {
                            this.totalMileList.forEach((v) => {
                                time.push(v.date)
                                // machTypeId : 144-牵引机;146-单轮张力机;147-双轮张力机;
                                if (this.machTypeId == 147) {
                                    mile.push(v.mile)
                                    mile1.push(v.mile1)
                                    mile2.push(v.mile2)
                                } else {
                                    mile.push(v.mile)
                                    mile1.push(v.mile1)
                                }
                            })
                            if (this.machTypeId == 147) {
                                series = [
                                    {
                                        name: "总里程",
                                        type: "line",
                                        data: mile,
                                        smooth: true, //true 为平滑曲线，false为直线
                                        areaStyle: {},
                                        // symbol: 'none',
                                        itemStyle: {
                                            normal: {
                                                color: "#F35969",
                                                lineStyle: {
                                                    // 系列级个性化折线样式
                                                    width: 4,
                                                    type: "solid",
                                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                                    // 右下左上
                                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                        {
                                                            offset: 0,
                                                            color: "#F35969",
                                                        },
                                                        {
                                                            offset: 1,
                                                            color: "#F35969",
                                                        },
                                                    ]), // 线条渐变色
                                                },
                                            },
                                        }, // 线条样式
                                        areaStyle: {
                                            normal: {
                                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        // 折线图颜色渐变
                                                        offset: 0,
                                                        color: "#F35969",
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "#fff",
                                                    },
                                                ]),
                                            },
                                        },
                                    },
                                    {
                                        name: "总里程1",
                                        type: "line",
                                        data: mile1,
                                        smooth: true, //true 为平滑曲线，false为直线
                                        areaStyle: {},
                                        // symbol: 'none',
                                        itemStyle: {
                                            normal: {
                                                color: "#00B9FE",
                                                lineStyle: {
                                                    // 系列级个性化折线样式
                                                    width: 4,
                                                    type: "solid",
                                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                                    // 右下左上
                                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                        {
                                                            offset: 0,
                                                            color: "#00B9FE",
                                                        },
                                                        {
                                                            offset: 1,
                                                            color: "#00B9FE",
                                                        },
                                                    ]), // 线条渐变色
                                                },
                                            },
                                        }, // 线条样式
                                        areaStyle: {
                                            normal: {
                                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        // 折线图颜色渐变
                                                        offset: 0,
                                                        color: "#00B9FE",
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "#fff",
                                                    },
                                                ]),
                                            },
                                        },
                                    },
                                    {
                                        name: "总里程2",
                                        type: "line",
                                        data: mile2,
                                        smooth: true, //true 为平滑曲线，false为直线
                                        areaStyle: {},
                                        // symbol: 'none',
                                        itemStyle: {
                                            normal: {
                                                color: "#00FEFB",
                                                lineStyle: {
                                                    // 系列级个性化折线样式
                                                    width: 4,
                                                    type: "solid",
                                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                                    // 右下左上
                                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                        {
                                                            offset: 0,
                                                            color: "#00FEFB",
                                                        },
                                                        {
                                                            offset: 1,
                                                            color: "#00FEFB",
                                                        },
                                                    ]), // 线条渐变色
                                                },
                                            },
                                        }, // 线条样式
                                        areaStyle: {
                                            normal: {
                                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        // 折线图颜色渐变
                                                        offset: 0,
                                                        color: "#00FEFB",
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "#fff",
                                                    },
                                                ]),
                                            },
                                        },
                                    },
                                ]
                            } else {
                                series = [
                                    {
                                        name: "总里程",
                                        type: "line",
                                        data: mile,
                                        smooth: true, //true 为平滑曲线，false为直线
                                        areaStyle: {},
                                        // symbol: 'none',
                                        itemStyle: {
                                            normal: {
                                                color: "#F35969",
                                                lineStyle: {
                                                    // 系列级个性化折线样式
                                                    width: 4,
                                                    type: "solid",
                                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                                    // 右下左上
                                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                        {
                                                            offset: 0,
                                                            color: "#F35969",
                                                        },
                                                        {
                                                            offset: 1,
                                                            color: "#F35969",
                                                        },
                                                    ]), // 线条渐变色
                                                },
                                            },
                                        }, // 线条样式
                                        areaStyle: {
                                            normal: {
                                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        // 折线图颜色渐变
                                                        offset: 0,
                                                        color: "#F35969",
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "#fff",
                                                    },
                                                ]),
                                            },
                                        },
                                    },
                                    {
                                        name: "总里程1",
                                        type: "line",
                                        data: mile1,
                                        smooth: true, //true 为平滑曲线，false为直线
                                        areaStyle: {},
                                        // symbol: 'none',
                                        itemStyle: {
                                            normal: {
                                                color: "#00B9FE",
                                                lineStyle: {
                                                    // 系列级个性化折线样式
                                                    width: 4,
                                                    type: "solid",
                                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                                    // 右下左上
                                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                        {
                                                            offset: 0,
                                                            color: "#00B9FE",
                                                        },
                                                        {
                                                            offset: 1,
                                                            color: "#00B9FE",
                                                        },
                                                    ]), // 线条渐变色
                                                },
                                            },
                                        }, // 线条样式
                                        areaStyle: {
                                            normal: {
                                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        // 折线图颜色渐变
                                                        offset: 0,
                                                        color: "#00B9FE",
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "#fff",
                                                    },
                                                ]),
                                            },
                                        },
                                    },
                                ]
                            }
                        }
                        this.avgMileLineFn(time, series)
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        remainOilFn() {
            let remainOil = this.$echarts.init(document.getElementById("remainOil"))
            let xAxis = {}
            let formatter = null
            let series = []
            let that = this
            if (this.dateRadio == 0) {
                formatter = this.remainOilDayTipFn
                xAxis = {
                    type: "time",
                    splitNumber: 12,
                    axisLabel: {
                        formatter: function (value, index) {
                            var date = new Date(value)
                            var hour = date.getHours()
                            var minutes = date.getMinutes()
                            if (hour < 10) {
                                hour = "0" + hour
                            }
                            if (minutes < 10) {
                                minutes = "0" + minutes
                            }
                            return hour + ":" + minutes
                        },
                        color: "#BFBFBF",
                    },

                    // data: this.timeList,
                    name: "时间",
                    // type: 'category',
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#BFBFBF",
                            type: "dashed",
                        },
                    },
                    splitLine: {
                        //去除网格线
                        show: false,
                        lineStyle: {
                            type: "dashed",
                            color: "#BFBFBF",
                        },
                    },
                    boundaryGap: false,
                }
                series = [
                    {
                        name: "实时油量",
                        type: "line",
                        data: this.remainOilList,
                        smooth: true, //true 为平滑曲线，false为直线
                        // symbol: 'none',
                        itemStyle: {
                            normal: {
                                color: "rgb(97, 156, 236)",
                                lineStyle: {
                                    // 系列级个性化折线样式
                                    width: 4,
                                    type: "solid",
                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                    // 右下左上
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "rgb(97, 156, 236)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgb(97, 156, 236)",
                                        },
                                    ]), // 线条渐变色
                                },
                            },
                        }, // 线条样式
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0,
                                        color: "rgb(97, 156, 236)",
                                    },
                                    {
                                        offset: 1,
                                        color: "#fff",
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        name: "实时油量",
                        type: "line",
                        data: this.remainOilList,
                        smooth: true, //true 为平滑曲线，false为直线
                        areaStyle: {
                            opacity: 0,
                        },
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: "rgba(0, 0, 0)",
                                lineStyle: {
                                    // 系列级个性化折线样式
                                    width: 0,
                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                    // 右下左上
                                    color: "rgba(0, 0, 0)",
                                },
                            },
                        },
                    },
                ]
            } else {
                formatter = this.remainOilAllTipFn
                xAxis = {
                    axisLabel: {
                        color: "#BFBFBF",
                    },
                    data: this.timeList,
                    name: "时间",
                    type: "category",
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#BFBFBF",
                            type: "dashed",
                        },
                    },
                    splitLine: {
                        //去除网格线
                        show: false,
                        lineStyle: {
                            type: "dashed",
                            color: "#BFBFBF",
                        },
                    },
                    boundaryGap: false,
                }
                series = [
                    {
                        name: "实时油量",
                        type: "line",
                        data: this.remainOilList,
                        smooth: true, //true 为平滑曲线，false为直线
                        areaStyle: {},
                        // symbol: 'none',
                        itemStyle: {
                            normal: {
                                color: "rgb(97, 156, 236)",
                                lineStyle: {
                                    // 系列级个性化折线样式
                                    width: 4,
                                    type: "solid",
                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                    // 右下左上
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "rgb(97, 156, 236)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgb(97, 156, 236)",
                                        },
                                    ]), // 线条渐变色
                                },
                            },
                        }, // 线条样式
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0,
                                        color: "rgb(97, 156, 236)",
                                    },
                                    {
                                        offset: 1,
                                        color: "#fff",
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        name: "实时油量",
                        type: "line",
                        data: this.remainOilPercentList,
                        smooth: true, //true 为平滑曲线，false为直线
                        areaStyle: {
                            opacity: 0,
                        },
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: "rgba(0, 0, 0)",
                                lineStyle: {
                                    width: 0, // 线宽是0
                                    color: "rgba(0, 0, 0, 0)", // 线的颜色是透明的
                                },
                            },
                        },
                    },
                ]
            }
            remainOil.setOption({
                color: ["#1891FF"],
                tooltip: {
                    formatter,
                    trigger: "axis",
                    axisPointer: {
                        type: "",
                    },
                    //触发类型：坐标轴触发
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                grid: {
                    left: "4%",
                    right: "5%",
                    bottom: "2%",
                    containLabel: true,
                },
                xAxis: xAxis,
                yAxis: [
                    {
                        name: "油量（L）",
                        splitNumber: 5,
                        axisLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                        },
                    },
                ],
                series,
            })
        },
        oilWearFn() {
            let oilWearObj = this.$echarts.init(document.getElementById("oilWear"))
            let day = []
            let oilAdd = []
            let oilWear = []
            this.oilDayList.forEach((v) => {
                day.push(v.date)
                oilAdd.push(v.oilAdd)
                oilWear.push(v.oilWear)
            })
            oilWearObj.setOption({
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                    //触发类型：坐标轴触发
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                legend: {
                    bottom: "1%",
                },
                grid: {
                    left: "4%",
                    right: "4%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        name: "日期",
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#BFBFBF",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        boundaryGap: true,
                        data: day,
                    },
                ],
                yAxis: [
                    {
                        name: "油耗 （L）",
                        type: "value",
                        offset: 8,
                        splitNumber: 5,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#BFBFBF",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            //去除网格线
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "加油量",
                        type: "bar",
                        stack: "油量",
                        data: oilAdd,
                        itemStyle: {
                            normal: {
                                color: "#07BBFE",
                                lineStyle: {
                                    color: "#07BBFE",
                                },
                            },
                        },
                    },
                    {
                        name: "油耗量",
                        type: "bar",
                        stack: "油量",
                        data: oilWear,
                        itemStyle: {
                            normal: {
                                color: "#FC8E4B",
                                lineStyle: {
                                    color: "#FC8E4B",
                                },
                            },
                        },
                    },
                ],
            })
        },
        radarMapDTOTipFn(date) {
            let nameStr = ""
            nameStr = `
                    <div class="canvasTip" >
                        <div class="item" style="padding:0 5px;">${date.seriesName}</div>
                        <div class="item" style="padding:0 10px;">
                            <span class="name">效率指数：</span>
                            <span class="name">${date.value[0] > 0 ? date.value[0] : "0"}</span>
                        </div>
                        <div class="item" style="padding:0 10px;">
                            <span class="name">稳定指数</span>
                            <span class="name">${date.value[1] > 0 ? date.value[1] : "0"}</span>
                        </div>
                        <div class="item" style="padding:0 10px;">
                            <span class="name">油耗指数</span>
                            <span class="name">${date.value[2] > 0 ? date.value[2] : "0"}</span>
                        </div>
                        <div class="item" style="padding:0 10px;">
                            <span class="name">安全指数</span>
                            <span class="name">${date.value[3] > 0 ? date.value[3] : "0"}</span>
                        </div>
                        <div class="item" style="padding:0 10px;">
                            <span class="name">强度指数</span>
                            <span class="name">${date.value[4] > 0 ? date.value[4] : "0"}</span>
                        </div>
                    </div>
                    `

            return nameStr
        },
        avgOilWearLineFn() {
            let avgOilWearLine = this.$echarts.init(document.getElementById("avgOilWearLine"))
            avgOilWearLine.setOption({
                color: ["#1891FF"],
                tooltip: {
                    trigger: "axis",
                    formatter: this.avgOilWearLineTipFn,
                    axisPointer: {
                        type: "",
                    },
                    //触发类型：坐标轴触发
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                grid: {
                    left: "4%",
                    right: "5%",
                    bottom: "2%",
                    containLabel: true,
                },
                xAxis: {
                    data: this.timeList,
                    name: "时间",
                    type: "category",
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#BFBFBF",
                            type: "dashed",
                        },
                    },
                    splitLine: {
                        //去除网格线
                        show: false,
                        lineStyle: {
                            type: "dashed",
                            color: "#BFBFBF",
                        },
                    },
                    boundaryGap: false,
                },
                yAxis: {
                    show: true,
                    name: "油耗（L）",
                    splitNumber: 5,
                    axisLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#BFBFBF",
                        },
                    },
                    splitLine: {
                        //去除网格线
                        show: false,
                    },
                },
                series: [
                    {
                        name: "日油耗",
                        type: "line",
                        data: this.oilWearList,
                        smooth: true, //true 为平滑曲线，false为直线
                        areaStyle: {},
                        // symbol: 'none',
                        itemStyle: {
                            normal: {
                                color: "rgb(97, 156, 236)",
                                lineStyle: {
                                    // 系列级个性化折线样式
                                    width: 4,
                                    type: "solid",
                                    // 颜色渐变函数 前四个参数分别表示四个位置依次为
                                    // 右下左上
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "rgb(97, 156, 236)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgb(97, 156, 236)",
                                        },
                                    ]), // 线条渐变色
                                },
                            },
                        }, // 线条样式
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0,
                                        color: "rgb(97, 156, 236)",
                                    },
                                    {
                                        offset: 1,
                                        color: "#fff",
                                    },
                                ]),
                            },
                        },
                    },
                ],
            })
        },
        avgMileLineFn(time, series) {
            let avgMileLine = this.$echarts.init(document.getElementById("avgMileLine"))
            avgMileLine.setOption(
                {
                    color: ["#1891FF"],
                    tooltip: {
                        trigger: "axis",
                        formatter: this.avgMileLineTipFn,
                        axisPointer: {
                            type: "",
                        },
                        //触发类型：坐标轴触发
                        backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                        color: "black",
                        textStyle: {
                            color: "#303030",
                        },
                        extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                    },
                    legend: {
                        selectedMode: false,
                        bottom: "1%",
                        data: this.mileList,
                    },
                    grid: {
                        // bottom: '2%',
                        left: "4%",
                        right: "5%",
                        containLabel: true,
                    },
                    xAxis: {
                        data: time,
                        name: "时间",
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#BFBFBF",
                                type: "dashed",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        boundaryGap: false,
                    },
                    yAxis: {
                        show: true,
                        name: "里程（m）",
                        splitNumber: 5,
                        axisLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                        },
                    },
                    series,
                },
                true
            )
        },
        avgOilWearLineTipFn(date) {
            let nameStr = ""
            nameStr = `
                    <div class="canvasTip">
                        <div class="item">${date[0].axisValue}</div>
                        <div class="item">
                            <span class="radius4 radius"></span>
                            <span class="name">${date[0].seriesName}</span>
                            <span class="name">${date[0].value ? date[0].value + " L" : "0 L"}</span>
                        </div>
                    </div>
                    `

            return nameStr
        },
        avgMileLineTipFn(date) {
            let nameStr = ""
            if (this.machTypeId == 147) {
                nameStr = `
                    <div class="canvasTip">
                        <div class="item">${date[0].axisValue}</div>
                        <div class="item">
                            <span class="radius1 radius"></span>
                            <span class="name">${date[0].seriesName}</span>
                            <span class="name">${date[0].value ? date[0].value + " m" : "0 m"}</span>
                        </div>
                        <div class="item">
                            <span class="radius2 radius"></span>
                            <span class="name">${date[1].seriesName}</span>
                            <span class="name">${date[1].value ? date[1].value + " m" : "0 m"}</span>
                        </div>
                        <div class="item">
                            <span class="radius3 radius"></span>
                            <span class="name">${date[2].seriesName}</span>
                            <span class="name">${date[2].value ? date[2].value + " m" : "0 m"}</span>
                        </div>
                    </div>
                    `
            } else {
                nameStr = `
                    <div class="canvasTip">
                        <div class="item">${date[0].axisValue}</div>
                        <div class="item">
                            <span class="radius1 radius"></span>
                            <span class="name">${date[0].seriesName}</span>
                            <span class="name">${date[0].value ? date[0].value + " m" : "0 m"}</span>
                        </div>
                        <div class="item">
                            <span class="radius2 radius"></span>
                            <span class="name">${date[1].seriesName}</span>
                            <span class="name">${date[1].value ? date[1].value + " m" : "0 m"}</span>
                        </div>
                    </div>
                    `
            }
            return nameStr
        },
        cancel(type) {
            if (type == 1) {
                this.cancelFlag = false
                this.commonOliAddFn()
            } else if (type == 2) {
                this.isOilAddFlag = false
                this.getMachOilAddFn()
            }
        },
        remainOilDayTipFn(date) {
            let nameStr = ""
            nameStr = `
                    <div class="canvasTip">
                        <div class="item">${initHM(date[0].axisValue)}</div>
                        <div class="item">
                            <span class="name">${date[0].seriesName}</span>
                            <span class="name">${date[0].data.value[1] ? date[0].data.value[1] + " L" : "0 L"}</span>
                        </div>
                        <div class="item">
                            <span class="name">${date[0].seriesName}</span>
                            <span class="name">${date[0].data.value[2] ? date[0].data.value[2] + " %" : "0 %"}</span>
                        </div>
                    </div>
                    `
            return nameStr
        },
        remainOilAllTipFn(date) {
            let nameStr = ""
            nameStr = `
                <div class="canvasTip">
                    <div class="item">${date[0].axisValue}</div>
                    <div class="item">
                        <span class="name">${date[0].seriesName}</span>
                        <span class="name">${date[0].value ? date[0].value + " L" : "0 L"}</span>
                    </div>
                    <div class="item">
                        <span class="name">${date[0].seriesName}</span>
                        <span class="name">${date[1].value ? date[1].value + " %" : "0 %"}</span>
                    </div>
                </div>
                `
            return nameStr
        },
    },
    mounted() {
        this.day = initYMD(this.day)
        this.maxDate = this.day
        this.porjectType = this.$store.state.porjectObject.deptId
        this.deptName = this.$store.state.porjectObject.name
        this.flag = localStorage.getItem("zh_flag")
        this.getMachNumStatFn()
        this.getList()
        if (JSON.stringify(this.$route.query) != "{}") {
            let obj = this.$route.query
            this.tabs = obj.type
            this.machId = obj.machId
            this.machTypeId = obj.machTypeId
            if (obj.deviceType == 1) {
                this.ifOBDFlag = false
            } else if (obj.deviceType == 11) {
                this.ifOBDFlag = true
            }
            if (this.tabs == 1) {
                if (!this.switchDataFlag) {
                    if (this.ifOBDFlag) {
                        this.getOBDGPSLogList(this.machId, this.day)
                    } else {
                        this.getMachGps(this.machId, this.day)
                    }
                }
                this.switchDataFlag = false
                this.polyline.forEach((v) => {
                    this.map.remove(v)
                })
                // this.getMachGPSTransportFn(this.machId, this.day);
            } else if (this.tabs == 2) {
                this.dateRadio = 0
                this.getWork(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 3) {
                this.dateRadio = 0
                this.getOil(this.machId, this.workEenterTime, this.day)
            } else if (this.tabs == 5) {
                this.tabActiveNameOBD = "1"
                this.getOBDGPSParamList()
            }
        }
    },
}
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/mach.less";
@import "./../../assets/style/modal.less";
</style>

<style lang="scss" scoped>
@function pxToRem($val) {
    @return $val/100 + rem;
}
/deep/ .canvasTip {
    .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .radius {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
            &.radius1 {
                background-color: #f35969;
            }
            &.radius2 {
                background-color: #00b9fe;
            }
            &.radius3 {
                background-color: #00fefb;
            }
            &.radius4 {
                background-color: #619cec;
            }
        }
        .name {
            margin-right: 5px;
            font-size: 10px;
        }
    }
}
/deep/.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    .box_left {
        position: relative;
        width: 375px;
        height: 100%;
        overflow: hidden;
        margin-right: 10px;
        padding: 15px 0;
        box-sizing: border-box;
        background-color: #fbfdfd;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .top {
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            margin-bottom: 10px;
            //.ivu-input-icon-clear{
            //right: 50px;
            //}
            .ivu-input-wrapper {
                border-radius: 2px;
                box-sizing: border-box;
            }
            .ivu-input,
            .ivu-input-search {
                border: none;
                border-radius: 0;
            }
        }
        .lineBc {
            width: 375px;
            height: 4px;
            background: var(--themeColor);
            opacity: 0.24;
            margin-bottom: 10px;
        }
        .btnList {
            width: calc(100% - 30px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 35px;
            background: #fff;
            border-radius: 20px;
            border: 1px solid var(--themeColor);
            margin: auto;
            margin-bottom: 10px;
            .item {
                width: 50%;
                height: 35px;
                line-height: 35px;
                text-align: center;
                color: var(--themeColor);
                border-right: 1px solid var(--themeColor);
                cursor: pointer;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                &:nth-child(1) {
                    border-radius: 20px 0 0 20px;
                }
                &:nth-child(2) {
                    border-radius: 0 20px 20px 0;
                }
                &.active {
                    color: #fff;
                    background-color: var(--themeColor);
                }
                &:last-of-type {
                    border-right: none;
                }
            }
        }
        .center {
            width: 100%;
            height: 100%;
            flex: 1;
            overflow: auto;
            &::-webkit-scrollbar {
                width: 6px;
            }
            /*滚动槽*/
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                border-radius: 10px;
            }
            /* 滚动条滑块 */
            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background: rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            }
            &::-webkit-scrollbar-thumb:window-inactive {
                background: rgba(255, 0, 0, 0.4);
            }
            .list {
                .no_data {
                    width: 100%;
                    height: pxToRem(500);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    img {
                        display: block;
                        width: 100%;
                        height: pxToRem(250);
                        margin: 0 auto;
                    }
                }
                .item {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: 10px 30px;
                    padding-right: 50px;
                    box-sizing: border-box;
                    cursor: pointer;
                    &.active {
                        background-color: var(--themeColor) !important;
                        color: #fff;
                    }
                    &:nth-of-type(2n) {
                        background-color: #f3f6fd;
                    }
                    .img {
                        width: 37px;
                        height: 34px;
                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                        margin-right: 20px;
                    }
                    .name {
                        width: 60px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        margin-right: 20px;
                    }
                    .code {
                        width: 150px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                }
            }
        }
        .bottom {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 32px;
            line-height: 32px;
            text-align: center;
            color: #555454;
            box-sizing: border-box;
            background-color: #e1eafa;
        }
    }
    .box_right {
        width: calc(100% - 390px);
        height: 100%;
        .container {
            .search {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: pxToRem(20) pxToRem(25);
                box-sizing: border-box;
                background-color: #fff;
                .left {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .btnList {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        height: pxToRem(42);
                        background: #fff;
                        border-radius: 3px;
                        border: 1px solid var(--themeColor);
                        margin-right: pxToRem(30);
                        .item {
                            width: pxToRem(80);
                            height: pxToRem(42);
                            line-height: pxToRem(42);
                            text-align: center;
                            color: var(--themeColor);
                            border-right: 1px solid var(--themeColor);
                            cursor: pointer;
                            font-size: pxToRem(14);
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            &.active {
                                color: #fff;
                                background-color: var(--themeColor);
                            }
                            &:last-of-type {
                                border-right: none;
                            }
                        }
                    }
                    .btn {
                        .el-button {
                            width: pxToRem(100);
                            height: pxToRem(38);
                            line-height: pxToRem(38);
                            text-align: center;
                            background: var(--themeColor);
                            border-radius: pxToRem(20);
                            padding: 0;
                            font-size: pxToRem(14);
                            box-sizing: border-box;
                        }
                    }
                }

                .right {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .right_box {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        width: pxToRem(450);
                        .arrow_left,
                        .arrow_right {
                            width: pxToRem(30);
                            height: pxToRem(42);
                            text-align: center;
                            line-height: pxToRem(42);
                            font-size: pxToRem(24);
                            cursor: pointer;
                        }
                    }
                    .ivu-input-wrapper {
                        border: 1px solid var(--themeColor);
                        border-radius: 3px;
                        box-sizing: border-box;
                    }
                    .ivu-input,
                    .ivu-input-search {
                        border: none;
                        border-radius: 0;
                        color: var(--themeColor);
                    }
                    .ivu-icon {
                        color: var(--themeColor);
                    }
                }
            }
        }
        .GPS {
            position: relative;
            height: 100%;
            .filter {
                position: absolute;
                left: 25px;
                top: 70px;

                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #525355;
                z-index: 1;
                .item {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    border-radius: 3px;
                    padding: 8px 10px;
                    box-sizing: border-box;
                    background: #e2f0ff;
                    margin-bottom: 10px;
                    &.radioBox {
                        .radio {
                            width: 100%;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #525355;
                            .point {
                                width: 8px;
                                height: 8px;
                                background: #e7554e;
                                border-radius: 50%;
                                margin-right: 10px;
                            }
                        }
                        background: #fff;
                    }
                }
            }
            #container {
                height: 100%;
                width: 100%;
                position: relative;
            }
            .time_gsp,
            .time_none {
                width: 96%;
                height: pxToRem(70);
                background: #ffffff;
                position: absolute;
                bottom: 15px;
                left: 50%;
                transform: translateX(-50%);
            }
            .time_none {
                text-align: center;
                line-height: pxToRem(70);
                font-size: pxToRem(20);
            }
            .list_gsp {
                width: 96%;
                height: pxToRem(70);
                position: absolute;
                bottom: 0px;
                left: 50%;
                z-index: 1;
                transform: translateX(-50%);
                display: flex;
                justify-content: flex-start;
                .slider {
                    width: 100%;
                    .el-slider__bar {
                        background-color: var(--themeColor);
                    }
                    .el-slider__runway {
                        background-color: #d7d6d6;
                    }
                    .tip {
                        width: 95%;
                        margin: 0 auto;
                        div {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                        }
                        .p1 {
                            span {
                                width: 2px;
                                height: 3px;
                                background: rgba(254, 254, 253, 1);
                            }
                        }
                        .p2 {
                            height: 3px;
                            border-radius: 1px;
                            background: rgba(254, 254, 253, 1);
                        }
                        .p3 {
                            span {
                                color: #595a5c;
                                width: 20px;
                            }
                        }
                    }
                }
                .play {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 1%;
                    margin-top: -35px;
                    cursor: pointer;
                }
            }
            .btnList {
                position: absolute;
                left: 25px;
                top: 20px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                height: pxToRem(42);
                background: #fff;
                border-radius: pxToRem(21);
                border: 1px solid var(--themeColor);
                z-index: 1;
                overflow: hidden;
                .item {
                    width: pxToRem(80);
                    height: pxToRem(42);
                    line-height: pxToRem(42);
                    text-align: center;
                    color: var(--themeColor);
                    border-right: 1px solid var(--themeColor);
                    cursor: pointer;
                    font-size: pxToRem(14);
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    &.active {
                        color: #fff;
                        background-color: var(--themeColor);
                    }
                    &:last-of-type {
                        border-right: none;
                    }
                }
            }
            .time {
                position: absolute;
                right: 25px;
                top: 20px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                color: var(--themeColor);
                border: 1px solid var(--themeColor);
                width: pxToRem(200);
                height: pxToRem(42);
                background: #ffffff;
                border: 1px solid var(--themeColor);
                border-radius: pxToRem(3);
                z-index: 1;
                .arrow_left,
                .arrow_right {
                    width: pxToRem(30);
                    height: pxToRem(42);
                    text-align: center;
                    line-height: pxToRem(42);
                    font-size: pxToRem(24);
                    cursor: pointer;
                }
                .time_center {
                    flex: 1;
                    height: pxToRem(42);
                    border-left: 1px solid var(--themeColor);
                    border-right: 1px solid var(--themeColor);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    .ivu-input {
                        border: none;
                        border-right-color: none;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        padding: 0;
                        color: var(--themeColor);
                        cursor: pointer;
                        &:active {
                            outline: none;
                        }
                        &:focus {
                            border-color: none;
                            box-shadow: none;
                        }
                    }
                    .ivu-select-dropdown {
                        top: 40px !important;
                    }
                    .ivu-select-dropdown {
                        color: #515a6e;
                    }
                    .ivu-icon {
                        &.ivu-icon-ios-calendar-outline,
                        &.ivu-input-icon-normal,
                        &.ivu-input-icon {
                            display: none;
                        }
                    }
                    // .ivu-icon{
                    //     display: none;
                    // }
                }
            }
        }
        .WORK {
            height: 100%;
            background-color: #fff;
            .el-table__empty-text {
                width: 100% !important;
            }

            .workLineBc {
                width: 100%;
                height: pxToRem(15);
                background: #e6edf5;
            }
            .canvas {
                width: 100%;
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                .title {
                    h2 {
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        margin: 0 auto;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        color: var(--themeColor);
                        .bc {
                            width: 5px;
                            height: 15px;
                            background: var(--themeColor);
                            margin-right: 12px;
                        }
                    }
                }
                .tabsBox {
                    width: 95%;
                    margin: 10px auto;
                    .ivu-tabs {
                        width: 100%;
                    }
                    .ivu-tabs-bar {
                        margin-bottom: 0 !important;
                        border-bottom: 1px solid #e5e5e5;
                    }
                    .ivu-tabs-nav {
                        width: 100%;
                    }
                    .ivu-tabs-nav .ivu-tabs-tab-active {
                        color: var(--themeColor) !important;
                    }
                    .ivu-tabs-ink-bar {
                        background-color: var(--themeColor) !important;
                    }
                    .ivu-tabs-tab:hover {
                        color: var(--themeColor) !important;
                    }
                }
                .left,
                .right {
                    width: 49.5%;
                    background-color: #fff;
                    padding: pxToRem(16) pxToRem(23);
                    box-sizing: border-box;
                }
                .canvasBc {
                    height: 100%;
                    width: 1%;
                    background: #e6edf5;
                }
                .left {
                    .workDayCanvas {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .canvas_right {
                            .list {
                                list-style: none;
                                li {
                                    width: 100%;
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                    font-size: 12px;
                                    font-family: Microsoft YaHei;
                                    color: #181818;
                                    margin-bottom: pxToRem(10);
                                    .radius {
                                        width: pxToRem(15);
                                        height: pxToRem(15);
                                        margin-right: pxToRem(10);
                                    }
                                    .name {
                                        margin-right: pxToRem(20);
                                        width: pxToRem(60);
                                        color: #181818;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }
                                    .sub {
                                        margin-right: pxToRem(20);
                                        width: pxToRem(140);
                                        color: #58595a;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }
                                }
                            }
                        }
                    }
                    .lineBox {
                        height: 380px;
                        margin-top: 20px;
                        position: relative;
                        .lineItem {
                            position: absolute;
                            width: 100%;
                            height: 1px;
                            border-top: 1px dashed #dcdada;
                            left: 0;
                            z-index: 1;
                            &.one {
                                top: 0;
                            }
                            &.two {
                                top: 95px;
                            }
                            &.three {
                                top: 190px;
                            }
                            &.four {
                                top: 285px;
                            }
                            &.five {
                                top: 380px;
                            }
                        }
                        ul {
                            width: 100%;
                            height: 350px;
                            list-style: none;
                            display: flex;
                            justify-content: flex-start;
                            li {
                                height: 100%;
                                width: 12.5%;
                                border-bottom: 1px dashed #eef3f8;
                            }
                        }
                        .timebox {
                            width: 100%;
                            height: 30px;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            span {
                                width: 12.5%;
                                text-align: right;
                                font-size: 16px;
                                color: #000;
                            }
                        }
                        .box {
                            position: absolute;
                            width: 100%;
                            height: 350px;
                            top: 0;
                            left: 0;
                            display: flex;
                            justify-content: flex-start;
                            align-items: flex-end;
                            p {
                                position: absolute;
                                span {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
                .tableBox {
                    width: 100%;
                    margin: 0 auto;
                    background-color: #fff;
                    border-radius: 10px;
                    padding-bottom: pxToRem(20);
                    box-sizing: border-box;
                    canvas {
                        display: none !important;
                    }
                    .tableList {
                        width: 100%;
                        margin: auto;
                        .el-table {
                            color: #181818;
                            font-family: MicrosoftYaHei;
                            font-size: pxToRem(14);
                            td,
                            th.is-leaf {
                                border-bottom: none;
                            }
                            tr {
                                border: none;
                            }
                            thead th {
                                background-color: #e5ecfd !important;
                                color: #1891ff;
                                font-weight: 400;
                            }
                        }
                        .el-table__row {
                            background-color: #fff;
                            cursor: pointer;
                        }
                        .el-table--striped .el-table__body tr.el-table__row--striped td {
                            background-color: #f3f6fd;
                            cursor: pointer;
                        }
                    }
                }
                &.canvasBox {
                    display: block;
                    padding: pxToRem(16) pxToRem(23);
                    box-sizing: border-box;
                    background-color: #fff;
                    .canvas_top {
                        width: 96%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin: auto;
                        margin-top: pxToRem(20);
                        margin-bottom: pxToRem(70);
                        .item {
                            width: pxToRem(240);
                            height: pxToRem(125);
                            display: flex;
                            justify-content: flex-start;
                            align-items: flex-start;
                            border-radius: pxToRem(9);
                            margin-right: pxToRem(50);
                            padding: pxToRem(30) pxToRem(20);
                            box-sizing: border-box;
                            &:first-of-type {
                                background: linear-gradient(90deg, #46e0d6 0%, #1099d1 100%);
                            }
                            &:last-of-type {
                                background: linear-gradient(90deg, #9270ff 0%, #fd5d9f 100%);
                            }
                            .item_left {
                                width: pxToRem(50);
                                height: pxToRem(50);
                                margin-right: pxToRem(10);
                                img {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .item_right {
                                .p {
                                    color: #fff;
                                    &:first-of-type {
                                        font-size: pxToRem(16);
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                    }
                                    &:last-of-type {
                                        font-size: pxToRem(28);
                                        font-family: Myriad Pro;
                                        font-weight: 400;
                                        white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                    .canvas_bottom {
                        position: relative;
                        width: 96%;
                        margin: auto;
                        .canvas_none {
                            position: absolute;
                            top: 10%;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 80%;
                            height: 220px;
                            img {
                                display: block;
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }
        .RADAR {
            height: 100%;
            background-color: #fff;
            .radarLineBc {
                width: 100%;
                height: pxToRem(15);
                background: #e6edf5;
            }
            .canvas {
                width: 100%;
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                .title {
                    h2 {
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        margin: 0 auto;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        color: var(--themeColor);
                        .bc {
                            width: 5px;
                            height: 15px;
                            background: var(--themeColor);
                            margin-right: 12px;
                        }
                    }
                }
                &.canvasBox {
                    display: block;
                    padding: pxToRem(16) pxToRem(23);
                    box-sizing: border-box;
                    background-color: #fff;
                    .canvas_top {
                        width: 96%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin: auto;
                        margin-top: pxToRem(20);
                        margin-bottom: pxToRem(70);
                        .item {
                            width: pxToRem(240);
                            height: pxToRem(125);
                            display: flex;
                            justify-content: flex-start;
                            align-items: flex-start;
                            border-radius: pxToRem(9);
                            margin-right: pxToRem(50);
                            padding: pxToRem(30) pxToRem(20);
                            box-sizing: border-box;
                            background: linear-gradient(90deg, #764ffd 0%, #a7cdfe 100%);
                            .item_left {
                                width: pxToRem(50);
                                height: pxToRem(50);
                                margin-right: pxToRem(10);
                                img {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .item_right {
                                .p {
                                    color: #fff;
                                    &:first-of-type {
                                        font-size: pxToRem(16);
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                    }
                                    &:last-of-type {
                                        font-size: pxToRem(28);
                                        font-family: Myriad Pro;
                                        font-weight: 400;
                                        white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                    .canvas_bottom {
                        width: 96%;
                        margin: auto;
                    }
                }
            }
        }
        .OIL {
            height: 100%;
            background-color: #fff;
            .oilLineBc {
                width: 100%;
                height: pxToRem(15);
                background: #e6edf5;
            }
            .canvas {
                padding: pxToRem(17) pxToRem(23);
                box-sizing: border-box;
                .title {
                    h2 {
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        margin: 0 auto;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        color: var(--themeColor);
                        .bc {
                            width: 5px;
                            height: 15px;
                            background: var(--themeColor);
                            margin-right: 12px;
                        }
                    }
                }
                .remainOil {
                    position: relative;
                    .canvas_none {
                        position: absolute;
                        top: -5%;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 80%;
                        height: pxToRem(220);
                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .canvas_top {
                    width: 96%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: auto;
                    margin-top: pxToRem(20);
                    .canvas_left {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .item {
                            width: pxToRem(240);
                            height: pxToRem(125);
                            display: flex;
                            justify-content: flex-start;
                            align-items: flex-start;
                            border-radius: pxToRem(9);
                            margin-right: pxToRem(50);
                            padding: pxToRem(30) pxToRem(20);
                            box-sizing: border-box;
                            &:nth-of-type(1) {
                                background: linear-gradient(90deg, #f8cf8b 0%, #f35969 100%);
                            }
                            &:nth-of-type(2) {
                                background: linear-gradient(90deg, #8be0f8 0%, #00b9fe 100%);
                            }
                            &:nth-of-type(3) {
                                background: linear-gradient(90deg, #d2feff 0%, #00fefb 100%);
                            }
                            .item_left {
                                width: pxToRem(50);
                                height: pxToRem(50);
                                margin-right: pxToRem(10);
                                img {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .item_right {
                                .p {
                                    color: #fff;
                                    &:first-of-type {
                                        font-size: pxToRem(16);
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                    }
                                    &:last-of-type {
                                        font-size: pxToRem(28);
                                        font-family: Myriad Pro;
                                        font-weight: 400;
                                        white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                    .canvas_right {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .list {
                            list-style: none;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            &:last-of-type {
                                li {
                                    .radius {
                                        width: pxToRem(25);
                                        height: pxToRem(15);
                                        margin-right: pxToRem(10);
                                        border-radius: pxToRem(7);
                                    }
                                }
                            }
                            li {
                                width: 100%;
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                font-size: 12px;
                                font-family: Microsoft YaHei;
                                color: #181818;
                                margin-bottom: pxToRem(10);
                                .radius {
                                    width: pxToRem(40);
                                    height: pxToRem(15);
                                    margin-right: pxToRem(10);
                                    border-radius: pxToRem(7);
                                }
                                .name {
                                    margin-right: pxToRem(10);
                                    width: pxToRem(60);
                                    color: #181818;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                    }
                }
                .canvas_bottom {
                    .lineBox {
                        height: pxToRem(200);
                        margin-top: pxToRem(20);
                        position: relative;
                        .lineItem {
                            position: absolute;
                            width: 100%;
                            height: 1px;
                            border-top: 1px dashed #dcdada;
                            left: 0;
                            z-index: 1;
                            &.one {
                                top: 0;
                            }
                            &.two {
                                top: pxToRem(50);
                            }
                            &.three {
                                top: pxToRem(100);
                            }
                            &.four {
                                top: pxToRem(150);
                            }
                        }
                        ul {
                            width: 100%;
                            height: pxToRem(200);
                            list-style: none;
                            display: flex;
                            justify-content: flex-start;
                            li {
                                height: 100%;
                                width: 12.5%;
                                border-bottom: 1px dashed #eef3f8;
                            }
                        }
                        .timebox {
                            width: 100%;
                            height: pxToRem(30);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            margin-top: pxToRem(20);
                            span {
                                width: 12.5%;
                                text-align: right;
                                font-size: pxToRem(16);
                                color: #000;
                            }
                        }
                        .box {
                            position: absolute;
                            width: 100%;
                            height: pxToRem(200);
                            top: 0;
                            left: 0;
                            display: flex;
                            justify-content: flex-start;
                            align-items: flex-end;
                            .pBC {
                                position: absolute;
                                .toolTip {
                                    position: absolute;
                                    right: 0;
                                    top: pxToRem(-120);
                                    padding: pxToRem(10) pxToRem(15);
                                    box-sizing: border-box;
                                    background-color: rgba(0, 0, 0, 0.3);
                                    color: #fff;
                                    border-radius: pxToRem(10);
                                    transform: translateX(100%);
                                    z-index: 3;
                                    width: 150px;
                                    .p_time {
                                        font-size: pxToRem(12);
                                        margin-bottom: 5px;
                                    }
                                    .p_item {
                                        display: flex;
                                        justify-content: flex-start;
                                        align-items: center;
                                        padding-left: 3px;
                                        box-sizing: border-box;
                                        font-size: 12px;
                                        margin-bottom: 5px;
                                        .radio {
                                            width: 8px;
                                            height: 8px;
                                            border-radius: 50%;
                                            margin-right: 5px;
                                        }
                                        .radio1 {
                                            background-color: #0775fe;
                                        }
                                        .radio2 {
                                            background-color: #07bbfe;
                                        }
                                        .radio3 {
                                            background-color: #fd5f00;
                                        }
                                    }
                                }
                            }
                            p {
                                span {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                        .lineBottomBox {
                            position: absolute;
                            width: 100%;
                            height: 10px;
                            bottom: -12px;
                            left: 0;
                            display: flex;
                            justify-content: flex-start;
                            align-items: flex-end;
                            p {
                                position: absolute;
                                span {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
        .OBD {
            height: 100%;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .search {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: pxToRem(20) pxToRem(25);
                box-sizing: border-box;
                background-color: #fff;
                .btnList {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    height: pxToRem(42);
                    background: #fff;
                    border-radius: 3px;
                    border: 1px solid #1891ff;
                    .item {
                        width: pxToRem(80);
                        height: pxToRem(42);
                        line-height: pxToRem(42);
                        text-align: center;
                        color: var(--themeColor);
                        border-right: 1px solid var(--themeColor);
                        cursor: pointer;
                        font-size: pxToRem(14);
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        &.active {
                            color: #fff;
                            background-color: var(--themeColor);
                        }
                        &:last-of-type {
                            border-right: none;
                        }
                    }
                }
                .com_box {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .com_class {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        font-size: pxToRem(14);
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        color: var(--themeColor);
                        margin-right: pxToRem(50);
                        .left {
                            position: relative;
                            width: pxToRem(42);
                            height: pxToRem(42);
                            margin-right: pxToRem(15);
                            &.bg {
                                background-repeat: no-repeat;
                                padding: pxToRem(4) pxToRem(4) pxToRem(5);
                                background-size: 100% 100%;
                                box-sizing: border-box;
                            }
                            &.bg1 {
                                background-image: url("../../assets/images/mach/data/mach_electricity_green.png");
                            }
                            &.bg2 {
                                background-image: url("../../assets/images/mach/data/mach_electricity_yellow.png");
                            }
                            &.bg3 {
                                background-image: url("../../assets/images/mach/data/mach_electricity_red.png");
                            }
                            .com_class_bc {
                                height: 100%;
                                border-top-right-radius: pxToRem(2);
                                border-bottom-right-radius: pxToRem(2);
                            }
                            img {
                                display: block;
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
            .OBDLineBc {
                width: 100%;
                height: pxToRem(15);
                background: #e6edf5;
            }
            .tableBox {
                width: 98%;
                flex: 1;
                margin: 0 auto;
                padding-top: pxToRem(10);
                box-sizing: border-box;
                overflow: hidden;
                .tableList {
                    width: 100%;
                    height: calc(100% - 0.8rem);
                    list-style: none;
                    overflow-y: auto;
                    display: block;
                    &::-webkit-scrollbar {
                        width: 6px;
                    }
                    /*滚动槽*/
                    &::-webkit-scrollbar-track {
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                        border-radius: 10px;
                    }
                    /* 滚动条滑块 */
                    &::-webkit-scrollbar-thumb {
                        border-radius: 10px;
                        background: rgba(0, 0, 0, 0.1);
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                    }
                    &::-webkit-scrollbar-thumb:window-inactive {
                        background: rgba(255, 0, 0, 0.4);
                    }
                    li {
                        float: left;
                        width: 24.2%;
                        height: pxToRem(100);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background: #fbfdfd;
                        border: pxToRem(1) solid #eee;
                        padding: pxToRem(45) pxToRem(22);
                        box-sizing: border-box;
                        margin-right: 1%;
                        margin-bottom: pxToRem(10);
                        &:nth-of-type(4n) {
                            margin-right: 0;
                        }
                        .left {
                            font-size: pxToRem(14);
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #606260;
                        }
                        .right {
                            font-size: pxToRem(14);
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: var(--themeColor);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            .icon {
                                width: pxToRem(30);
                                height: pxToRem(30);
                                margin-right: pxToRem(5);
                                img {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                    &.engineFault_table {
                        width: 100%;
                        height: calc(100% - 0.8rem);
                        list-style: none;
                        overflow: hidden;
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-start;
                        border: pxToRem(1) solid #eee;
                        box-sizing: border-box;
                        li {
                            &.engineFault {
                                flex: 1;
                                height: 100%;
                                display: block;
                                background: #fff;
                                box-sizing: border-box;
                                padding: 0;
                                border-right: pxToRem(1) solid #eee;
                                box-sizing: border-box;
                                margin-right: 0;
                                &:last-of-type {
                                    border-right: 0;
                                }
                                .p_top {
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                    .p_title {
                                        flex: 1;
                                        height: pxToRem(40);
                                        line-height: pxToRem(40);
                                        padding-left: pxToRem(22);
                                        border-bottom: pxToRem(1) solid #eee;
                                        box-sizing: border-box;
                                        font-size: pxToRem(16);
                                        color: #57a3f3;
                                    }
                                }
                                .p_content {
                                    width: 100%;
                                    height: calc(100% - 0.4rem);
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                }
                                .p_bottom {
                                    flex: 1;
                                    height: 100%;
                                    padding: pxToRem(20) pxToRem(22);
                                    box-sizing: border-box;
                                    .p_box {
                                        float: left;
                                        height: pxToRem(100);
                                        background: #fbfdfd;
                                        margin-right: 1%;
                                        margin-bottom: pxToRem(10);
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        flex-direction: column;
                                        padding: pxToRem(45) pxToRem(22);
                                        border: pxToRem(1) solid #eee;
                                        box-sizing: border-box;

                                        &.width24 {
                                            width: 24.2%;
                                        }
                                        &.width24:nth-of-type(4n) {
                                            margin-right: 0;
                                        }
                                        &.width49 {
                                            width: 49.5%;
                                        }
                                        &.width49:nth-of-type(2n) {
                                            margin-right: 0;
                                        }
                                    }
                                }
                            }
                            .left {
                                font-size: pxToRem(14);
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #606260;
                            }
                            .right {
                                font-size: pxToRem(14);
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: var(--themeColor);
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                .icon {
                                    width: pxToRem(30);
                                    height: pxToRem(30);
                                    margin-right: pxToRem(5);
                                    img {
                                        display: block;
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .OBDOIL,
        .OBDMILE {
            height: 100%;
            background-color: #fff;
            .lineBc {
                width: 100%;
                height: pxToRem(15);
                background: #e6edf5;
            }
            .canvas {
                padding: pxToRem(17) pxToRem(23);
                box-sizing: border-box;
                .title {
                    h2 {
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        margin: 0 auto;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        color: var(--themeColor);
                        .bc {
                            width: 5px;
                            height: 15px;
                            background: var(--themeColor);
                            margin-right: 12px;
                        }
                    }
                }
                .remainOil {
                    position: relative;
                    .canvas_none {
                        position: absolute;
                        width: 80%;
                        top: 10%;
                        left: 50%;
                        transform: translateX(-50%);
                        height: pxToRem(220);
                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .canvas_top {
                    position: relative;
                    width: 96%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin: auto;
                    margin-top: pxToRem(20);
                    .canvas_box {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .item {
                            width: pxToRem(240);
                            height: pxToRem(125);
                            display: flex;
                            justify-content: flex-start;
                            align-items: flex-start;
                            border-radius: pxToRem(9);
                            margin-right: pxToRem(50);
                            padding: pxToRem(30) pxToRem(20);
                            box-sizing: border-box;
                            &:nth-of-type(1) {
                                background: linear-gradient(90deg, #f8cf8b 0%, #f35969 100%);
                            }
                            &:nth-of-type(2) {
                                background: linear-gradient(90deg, #8be0f8 0%, #00b9fe 100%);
                            }
                            &:nth-of-type(3) {
                                background: linear-gradient(90deg, #d2feff 0%, #00fefb 100%);
                            }
                            .item_left {
                                width: pxToRem(50);
                                height: pxToRem(50);
                                margin-right: pxToRem(10);
                                img {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .item_right {
                                .p {
                                    color: #fff;
                                    &:first-of-type {
                                        font-size: pxToRem(16);
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                    }
                                    &:last-of-type {
                                        font-size: pxToRem(28);
                                        font-family: Myriad Pro;
                                        font-weight: 400;
                                        white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                    .canvas_left {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .item {
                            width: pxToRem(286);
                            height: pxToRem(125);
                            border-radius: pxToRem(9);
                            margin-right: pxToRem(50);

                            color: #fff;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            justify-content: flex-start;
                            .item_top {
                                width: 100%;
                                text-align: center;
                                font-size: pxToRem(14);
                                font-family: Microsoft YaHei;
                                font-weight: bold;
                                padding: pxToRem(10) 0;
                                box-sizing: border-box;
                                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                                box-sizing: border-box;
                            }
                            .item_bottom {
                                width: 100%;
                                flex: 1;
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                .item_box {
                                    flex: 1;
                                    height: 100%;
                                    padding-top: pxToRem(20);
                                    border-left: 1px solid rgba(255, 255, 255, 0.3);
                                    box-sizing: border-box;
                                    .p {
                                        text-align: center;
                                        font-size: pxToRem(14);
                                        font-family: Microsoft YaHei;
                                        &:last-of-type {
                                            font-size: pxToRem(20);
                                        }
                                    }
                                }
                            }
                            &:nth-of-type(1) {
                                background: linear-gradient(90deg, #f8cf8b 0%, #f35969 100%);
                            }
                            &:nth-of-type(2) {
                                background: linear-gradient(90deg, #8be0f8 0%, #00b9fe 100%);
                            }
                            &:nth-of-type(3) {
                                background: linear-gradient(90deg, #d2feff 0%, #00fefb 100%);
                            }
                            .item_left {
                                width: pxToRem(50);
                                height: pxToRem(50);
                                margin-right: pxToRem(10);
                                img {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .item_right {
                                .p {
                                    color: #fff;
                                    &:first-of-type {
                                        font-size: pxToRem(16);
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                    }
                                    &:last-of-type {
                                        font-size: pxToRem(28);
                                        font-family: Myriad Pro;
                                        font-weight: 400;
                                        white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                    .canvas_right {
                        position: absolute;
                        right: 0;
                        top: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        z-index: 99;
                        .list {
                            list-style: none;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            &:last-of-type {
                                cursor: pointer;
                                li {
                                    .radius {
                                        width: pxToRem(25);
                                        height: pxToRem(15);
                                        margin-right: pxToRem(10);
                                        border-radius: pxToRem(7);
                                    }
                                }
                            }
                            li {
                                width: 100%;
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                font-size: 12px;
                                font-family: Microsoft YaHei;
                                color: #181818;
                                margin-bottom: pxToRem(10);
                                .radius {
                                    width: pxToRem(40);
                                    height: pxToRem(15);
                                    margin-right: pxToRem(10);
                                    border-radius: pxToRem(7);
                                }
                                .name {
                                    margin-right: pxToRem(10);
                                    width: pxToRem(100);
                                    color: #181818;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
/deep/.oildAdd {
    .close {
        position: absolute;
        right: 14px;
        top: 14px;
        color: #fff;
        cursor: pointer;
    }
    .list {
        .item_box {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            margin-right: 10px;
            .span {
                width: 80px;
            }
            .arrow_left,
            .arrow_right {
                width: 30px;
                height: 42px;
                text-align: center;
                line-height: 42px;
                font-size: 24px;
                cursor: pointer;
            }
        }
        .ivu-input-wrapper {
            border: 1px solid var(--themeColor);
            border-radius: 3px;
            box-sizing: border-box;
        }
        .ivu-input,
        .ivu-input-search {
            border: none;
            border-radius: 0;
            color: var(--themeColor);
        }
        .ivu-icon {
            color: var(--themeColor);
        }
    }
    .tableList {
        width: 100%;
        margin: auto;
        .el-table {
            color: #181818;
            font-family: MicrosoftYaHei;
            font-size: pxToRem(14);
            td,
            th.is-leaf {
                border-bottom: none;
            }
            tr {
                border: none;
            }
            thead th {
                background-color: #e5ecfd !important;
                color: #1891ff;
                font-weight: 400;
            }
        }
        .el-table__row {
            background-color: #fff;
            cursor: pointer;
        }
        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background-color: #f3f6fd;
            cursor: pointer;
        }
        .el-table--border::after,
        .el-table--group::after,
        .el-table::before {
            background-color: transparent !important;
        }
    }
}
</style>
